Archived topic
Adjust 3 column header in mobile
5 replies · Started by Suzanne on August 12, 2020
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?
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/
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?
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.
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.
You're welcome :)
