Footer break points

Support
#1

Hi,
My client requires the footer to be the desktop version (2 columns side by side) when the site is viewed on a tablet. They’d also like this view when viewing the site on mobile landscape.

I’m afraid I have no idea how to manipulate the break points for this. Can you help?

This is the site.
http://77.104.180.227/~theweb53/themagicofyoga.co.uk/

Many thanks.

#2

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

@media (max-width: 979px) {
	footer.x-colophon.top .x-column.x-1-2 {
		width: 48%;
		float: left;
    	margin-right: 4%;
	}
	footer.x-colophon.top .x-column.x-1-2.last {
		margin-right: 0;
	}
}

Hope it helps,
Cheers!

#3

That’s helped. Thanks. But could you just help me make the column a bit wider when viewed on mobile portrait? I’ve set the first column to be hidden on this view but the remaining column is a bit thin and the subscription section is too narrow.

#4

Hi there,

Columns break into single column due to that reason, and it’s because it will be narrow. That CSS is already applied in percentage, hence, its width depends on container width, it can’t be wider than its container.

Perhaps you should only apply that CSS on a tablet?

@media (max-width: 979px) and (min-width: 768px)

Thanks!

#5

I’ve modified the CSS to;

@media (max-width:979px) and (min-width:667px)

which takes into account my iPhone 6 in landscape.

All working fine now, thanks.

#6

Glad to hear that :slight_smile:

Best regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.