Styling "challenge" – active editing window menu seems to shorten page

This topic contains 8 replies, has 2 voices, and was last updated by  Sebastian 4 years, 9 months ago.

Author Posts

zholy9

Hi Sebastian …

I’m wondering if there is a different/better approach to this styling challenge ?

https://www.useloom.com/share/a1914edaeae14cb28cacfb3028610d98

It’s not the first time this happened to me, but today it really “increased my pressure” as I thought that something went wrong, just before handing the site over to the company … just to find out after 30 min of tweaking & scratching my head that it is all OK 🙁

It looks like MT, when with the menu on, is wrongly calculating the end of webpage?


Sebastian

Hey,

Sorry for the slow reply. I’m still waiting for internet to be installed after moving house. I’ve just watched your video. The map obscures the button, but only when the toolbar is down. I’m not sure what’s causing that. It might have something to do with the styles you applied via Microthemer. Do you mind if I log into your site again using the details you sent the other day?

Thanks,
Sebastian


zholy9

Not at all…feel free 🙂


Sebastian

Thanks.

So this isn’t actually a bug with MT. The button doesn’t show when the toolbar is visible simply because this reduces the height of the site viewport. And because the quote button has absolute positioning it gets cut off.

The solution is to position the button where you want using padding or margin. Or float the button right/left and then set overflow to hidden on it’s parent element. The trouble with using absolute positioning in this case is that the button is taken out of the flow of the document. As a result, it doesn’t contribute to the overall height of the parent element like usual.

I discuss this issue on the educational note on positioning in the responsive tutorial: https://themeover.com/fluid-content/#float-over-position

You may also find the tutorials on float listed on the right of this page useful: https://themeover.com/float/

Note: I’ve disabled the position property group of your Personal Column2 selector which had absolute positioning so you can see the effect.

I hope that helps, let me know if you get stuck at all.


zholy9

Hi Sebastian…

Enjoyed your Christmass time? I’m spending mine on MT 🙂 … and rather than creating a new post, decided to add to this one.

Recently I’ve decided to rebuild my wife’s website and I’ve added a “condition” to a row height:70vh and a picture as a background. When clicking on the different options for screens (Iphone, Nokia, …) and choosing LANDSCAPE orientation … the preview is “ignoring” the “70vh” setting and only sets the “view area” to the phones dims, but doesn’t show the real preview, how it will look like on a phone.

Is that how it supposed to be ? Just asking …

Kind regards, Zdenek


zholy9

+ if not mistaken … for media queries, there is option/orientation like LANDSCAPE/PORTRAIT. How can this be added to the media queries? Just wondering … thx


Sebastian

Hey,

I hope you’re managing to relax a bit over the holidays too 🙂

Regarding the vh unit issue, MTs preview should cause the height to adjust. It’s a mistake. It relates to the other issue that I think you raised which I haven’t got around to fixing yet. The semi-transparent blue overlay that obscures the preview on the mobile device previews has an unwanted side-effect. It doesn’t change the actual height of the preview. And so results in certain inaccuracies when vertical screen height is pertinent.

Fixing this is on my list of small tasks to do after adding support for CSS transitions (80% done now). But I’m happy to address this today/tomorrow if it’s preventing you from finishing your wife’s site?

Regarding your other question about creating media queries for a particular orientation, you can edit Microthemer’s default media queries / add a new media query using the icon to the left of the responsive tabs. You could enter the following media query for instance:

@media screen and (max-device-width: 767px) and (orientation: landscape)

The above media query would target screens 767 pixels wide and lower when the orientation is landscape.

Cheers,
Sebastian


zholy9

Hi Sebastian …

Thanks, I think I do find a small space to relax (? – whatever it is) … 🙂

1. Don’t worry about the preview … I’m happy to do it on my phone. It’s just that I did something, that looked totally different on LANDSCAPE and I wasn’t expecting it on mobile, since “optically” I was used to the preview on MT 🙂 … but not a big deal at all.

2. OMG … so obvious! Feel silly even for asking … completely forgot that I can write/add to the media queries. Thanks for writing it down for people like me 🙂 🙂 🙂

Thanks Sebastian …


Sebastian

Haha, no problem. I’m happy to help. And I will sort out that preview height issue very soon 🙂

You must login or register to reply to this topic.