Column classes problem Altitude Pro – media query issue?

[TheJohnHamilton]

I've created some columns using column classes. All ok on the desktop but on mobile they are not working as expected.

I thought they would stack? Not shrink inwards.

This can be seen on widget #3 on the home page. And the text in the footer widgets goes to 1 character a line.

I guess it's a media query issue - perhaps I deleted something?

The site - https://bfpeople.com - is just live, so any help very welcome.

Thanks in advance.
John

https://bfpeople.com

[Christoph]

Hi John,

The Genesis Extender minified css is setting the width to 31% and the media queries of the child theme cannot override this.
You probably have to add a media query into your Genesis Extender css.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[TheJohnHamilton]

Thanks Christoph for the very quick reply.

To avoid doing something wrong here, Is there a resource with the code I need anywhere that I can copy?

Thanks again,
John

[Christoph]

Probably something like:

@media only screen and (max-width: 1023px) {
.one-third,.two-sixths {
	width: 100%;
}
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[TheJohnHamilton]

This reply has been marked as private.

[Christoph]

Hi John,

FYI, only you and Moderators can see posts/replies that you mark as private.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[TheJohnHamilton]

Ah... - I didn't realise that - thought it went to you... here's my reply:

That worked perfectly for the column classes - thanks,

It hasn't helped the footer widgets. I appreciate your help - sent you a donation for coffee!
Thanks,
J

[Christoph]

Hi John,

thanks for the coffee! 🙂

For the footer widgets, add

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    width: 100%;
}

to the media query in extender

@media only screen and (max-width: 1023px) {
.one-third, .two-sixths, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
    width: 100%;
}
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[TheJohnHamilton]

Great. That's sorted it. Thanks again for your help.
John

[Author]

Posts