[Resolved] Header positioning, padding, breakpoints, grid headings

[Tomasz]

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

[Leo]

Hi 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 🙂

[Tomasz]

Done. I’ve provided the link beforehand but somehow it got lost.

[Leo]

1. 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?

[Tomasz]

Sorry 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.

[Tomasz]

Regarding #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.

[David]

Hi 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

[Tomasz]

Thanks David, that works well; event without assigning a new class.

[Leo]

1. 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?

[Tomasz]

1. 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…

[Leo]

1. 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! 🙂

[Tomasz]

1. 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;
}

[Tomasz]

Btw. 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?

[Leo]

Background 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 try background-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.

[Tomasz]

It 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?

[Author]

Posts