Site logo

Archived topic

CSS Formatting For Header Sections - Unequal Widths

3 replies · Started by Mary Pearson on January 27, 2020

Viewing posts 1–4 of 4

Can you please tell me the correct way to format three unequal header sections. I know they need to add up to 100% but I just can't figure out how based on the following from documentation.

.header-section > div {
width: 33.33333%;
}

Many thanks

Hi Mary,

If you are using the same HTML here:
https://docs.generatepress.com/article/split-header-three-sections/

Then you would replace this part of the CSS:

.header-section > div {
    width: 33.33333%;
}

With this:

.header-section .header-section-1 {
    width: 20%
}
.header-section .header-section-2 {
    width: 60%
}
.header-section .header-section-3 {
    width: 20%
}

Let me know if this helps :)

Thank you so much Leo!!!!

No problem :)

This archived topic is closed to new replies.