[Resolved] Adjust 3 column header in mobile

[Suzanne]

Hi, I’ve set up a 3 column header using https://docs.generatepress.com/article/split-header-three-sections/ and all looks good on desktop. The handheld mobile version is not so good. I’d like to adjust the handheld version in this way:
1. Stack the logo (header-section-1), NAME(header-section-2), and ADDRESS&PHONE(header-section-3) on top of each other
2. Adjust the font size for NAME
3. Remove the ADDRESS and just display PHONE

Can someone assist with the CSS to achieve this?

[Tom]

Hi there,

1. Try the updated CSS here: https://docs.generatepress.com/article/split-header-three-sections/

2. Try this:

@media (max-width: 768px) {
    .header-section-2 {
        font-size: 25px;
    }
}

3. In the HTML, replace the address part with this:

<span class="hide-on-mobile">Address in here</span>

BTW, as of GPP 1.11.0, you can now build your header in the block editor: https://docs.generatepress.com/article/block-element-overview/

[Suzanne]

Hi Tom,
Thank you for the reply.

1. I’ve commented out my css and used the following css and it’s still not stacking in mobile:
.header-section {
display: flex;
}
.header-section > div {
width: 33.33333%;
}

@media (max-width: 768px) {
.header-section > div {
width: 100%;
}
}

2. I’ve added the following css and it has no effect on changing the font size:

@media (max-width: 768px) {
.header-section-2 {
font-size: 25px;
}
}

Any other ideas? Perhaps I have an improper setting somewhere else?

[Tom]

1. That CSS doesn’t match the updated CSS I added here: https://docs.generatepress.com/article/split-header-three-sections/

2. Make sure you add this CSS at the bottom of your child theme style.css file – it needs to be below the other stuff.

[Suzanne]

1. Ah, I see that the page has been updated with new CSS. I have been going crazy trying to figure out what was different. Everything is working as it should now. Thank you.

[Tom]

You’re welcome 🙂

[Author]

Posts