- This topic has 47 replies, 4 voices, and was last updated 5 years, 10 months ago by Tom.
-
AuthorPosts
-
May 12, 2018 at 6:27 am #573900Tomasz
Hi there,
I am trying to do two things with my generate press based website.1. I would like to be able to position (h1) page header on the home page so that it’s aligned to the center and to the bottom of the viewport window. It shouldn’t scroll but stay put. I was able to achieve this effect but the header was skewed to the right.
2. How to fix inconsistent padding (margins?). Space is always added below the text and I can’t get rid of that. While for desktop it’s quite easy to manage (adding padding to remaining text edges), but it’s more challenging for mobile, where paddings are small (except for the bottom one).
3. If I’d like to change breakpoints is it best to just specify font-sizes and line-height using media queries in Simple CSS? Is there anything else that I should be aware of?
4. I wonder if there is an easy way to align tiles if one title overflows to another line, and the other one doesn’t (compare: Design Research and Strategy and Futures Thinking). I could separate headings from paragraphs by using additional grid rows, but it seems overly complicated.
Tomek
May 12, 2018 at 9:33 am #574040LeoStaffCustomer SupportHi there,
Can you link me to the site in question?
You can edit the original topic and use the private URL field.
Let me know ๐
May 12, 2018 at 10:33 am #574064TomaszDone. I’ve provided the link beforehand but somehow it got lost.
May 12, 2018 at 2:10 pm #574129LeoStaffCustomer Support1. Can you add your original CSS on there so I know what kind of effect you are going for?
2. What element are you referring to? Perhaps you can write some CSS specifically for mobile?
https://docs.generatepress.com/article/responsive-display/3. Yeah that should be the best way.
4. Not quite sure what you mean here. Can you explain a bit more?
May 13, 2018 at 3:40 am #574339TomaszSorry for not being clear.
1. Recreated the situation by turning off “center vertically” (page header) and adding styling: position: absolute; bottom: 10px. Align: center – doesn’t help.
2. I’m doing this already. The problem, especially in case of mobile devices, is that I don’t want to add (excessive) padding to the top, left and right, just to hide padding of the bottom. I would prefer to reset/ get rid of unwanted padding (margins) from the moment. Right now you can observe it. Just check how on the mobile (there I didn’t hide it) on the main page all the grids have more padding than other edges.
4. I am referring to the background styling of the headings (and as a results of the paragraphs). I would like these two headings to have the same background height. The paragraphs below them should also have identical background area and start at the same height.
May 13, 2018 at 4:33 am #574353TomaszRegarding #4. In an ideal world, I would like the II heading to be of the same hight as the first one, but aligned vertically to the middle.
May 13, 2018 at 6:16 am #574384DavidStaffCustomer SupportHi Tomasz regading #4 you can try:
.tlo h2 { line-height: 2.5ex; height: 5ex; }
You may need to adjust the line-height and heights accordingly, this sets it to force the H2 to span to line regardless. If it is affecting other areas you don’t want it to then assign this code using a new class
May 13, 2018 at 6:23 am #574388TomaszThanks David, that works well; event without assigning a new class.
May 13, 2018 at 9:50 am #574518LeoStaffCustomer Support1. Ok try turning the vertical align center option on and set the text alignment to center, remove your current inline CSS and add this:
@media (min-width:769px) { .generate-inside-combined-content.page-header-content-container { margin-top: auto; } }
2. Sorry is this still about page header or something else?
May 14, 2018 at 11:46 pm #575806Tomasz1. This CSS works for desktop, once it gets to the breaking point for tablet, the text drops and is to low. For mobile, the headergets aligned to the middle both horizontally and vertically due to media queries.
2. No, this is for all the text boxes (perhaps other divs as well) and is best seen in the mobile view.Sorry for not being precise – I am not expert at this…
May 15, 2018 at 9:28 am #576261LeoStaffCustomer Support1. So what is the preferable solutions? Maybe change the breakpoints higher on my CSS?
@media (min-width:1025px) { .generate-inside-combined-content.page-header-content-container { margin-top: auto; } }
I also just noticed that you are using body background instead of page header background image which definitely makes it hard to deal with in various responsive mode.
background-size:100% auto;
might not be the best for mobile.2. I’m really not sure what I’m looking at here. All I’m noticing is the 10px padding added by yourself. Can you maybe take a couple screenshots and let me know what I’m looking at?
Thanks! ๐May 16, 2018 at 1:44 am #576803Tomasz1. An ideal scenario:
1.1 the header is on the bottom of the window and doesn’t scroll, no matter the device.
1.2 10px of padding added to the bottom.
1.3 The background picture works across the devices so that the standing man is in the center of the window. (I couldn’t achieve this using page header background, so I used media queries and 3 different pictures. It’s still not perfect: mobile and tablet in landscape mode are causing trouble. It would be great if I could get rid of that.).After applying your CSS without media queries the tablet view doesn’t work properly – the text gets to low.
I also don’t how to improve upon: “background-size:100% auto;” for the mobile. This is an only thing I came up to with to preserve the focus point (the man) in the center and in right proportions.
2. OK. Two examples
Example 1: picture 1: without any padding. Picture 2, after adding: “padding: 10px;”
Example 2 (mobile view).
Picture 3: no padding added at all, or so I think.
Picture 4 – added some padding to correct the sistuation.
.tlo { background-color: #292C44; color: #F0F0F1; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
May 16, 2018 at 2:45 am #576842TomaszBtw. Until now I have tested the website only on Chrome, and across the platforms. Just checked the website on IE. What a mess! Gonna have to dive into it.
Any suggestions on media query support across the browsers?May 16, 2018 at 9:56 am #577281LeoStaffCustomer SupportBackground images are very tricky to deal with and what you have in mind basically won’t work.
For example, the problem is not the text is too low in mobile, it is actually because of your background image shrunk vertically.
Instead of using
background-size:100% auto;
, can you trybackground-position: center center;
?Since the man is in the middle of the picture already. we should be able to do the above to keep him in the center.
Let me know.
May 16, 2018 at 10:55 pm #577682TomaszIt doesn’t work. On the mobile I can’t see any change. Let’s leave it for a while. I will leave it in the middle of the sceen for the moment.
Can you hel pme with text padding? -
AuthorPosts
- You must be logged in to reply to this topic.