Tagged: editing window, position absolute
- This topic has 8 replies, 2 voices, and was last updated 6 years, 3 months ago by
Sebastian.
| Author | Posts |
|---|---|
 zholy9
November 30, 2017 at 8:42 am
|
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
December 1, 2017 at 11:28 am
|
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, |
|
zholy9
December 1, 2017 at 11:30 am
|
Not at all…feel free 🙂 |
|
Sebastian
December 1, 2017 at 1:01 pm
|
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
December 28, 2017 at 1:52 pm
|
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
December 28, 2017 at 1:58 pm
|
+ 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
December 29, 2017 at 12:23 pm
|
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:
The above media query would target screens 767 pixels wide and lower when the orientation is landscape. Cheers, |
|
zholy9
December 29, 2017 at 12:31 pm
|
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
December 30, 2017 at 11:24 am
|
Haha, no problem. I’m happy to help. And I will sort out that preview height issue very soon 🙂 |
