Tablet Breakpoint of 4 column!

Support
#1

https://tinyurl.com/y9hnu4tn

I am using Cornerstone. I note it has change it’s structure in the past few months, a lot!

Please see link to my site above…

I have this section…http://prntscr.com/hnmv5t it is 4 column…

How do I change the breakpoint of this? For example, each of the 4 go to 100% on mobile…that’s good!
I want to make each 50% (2 columns) on tablet…as it looks like this now…which is bad…http://prntscr.com/hnmvqy

So can you supply the CSS as it doesn’t seem to work when I change the % in the theme CSS! I code a lot in CSS but can’t get it working!

Thanks,

#2

Hello There,

Thanks for writing in! To resolve your issue, you can make use of this custom css code

@media(min-width: 768px) and (max-width: 1024px){
    .x-container.flexing {
        flex-wrap: wrap;
    }

    .x-container.flexing .x-column.x-sm.x-1-4 {
        float: left;
        width: 48%;
        margin-right: 2%;
    }
}

Hope this helps. Please let us know how it goes.

#3

Thanks, still a bit of an issue ON SOME VIEW…

Can you advise on tweak to fix?

Thanks,

#4

Hi There,

I could not replicate the issue, could you provide the specific width you are referring to.

Thanks!

#5

It is on 768px width…it is in my previous screenshot…

so, on an ipad, it is like this! :slight_smile:
Thanks!

#6

Hi there,

Please kindly add the code below in addition to previous code:

.x-container.flexing {
    display: flex;
    flex-flow: row wrap
}

That should do the trick. Thank you.

#7

Thanks.

This looks okay on browser, but on a real iPad, there’s still an issue.

Perhaps some of your code is not IOS compatible?


It’s broken when testing on real IPAD?

Thanks!

#8

Hello There,

We need to clear the float right after the even columns. Please update the code and use this:

@media(min-width: 768px) and (max-width: 1024px){
    .x-container.flexing {
        flex-wrap: wrap;
    }

    .x-container.flexing .x-column.x-sm.x-1-4 {
        float: left;
        width: 48%;
        margin-right: 2%;
    }

    .x-container.flexing .x-column.x-sm.x-1-4:after:nth-child(2n) {
      clear: both;
    }
}

Hope this helps.

#9

Hi,

It’s the exact same - didn’t make a difference.

It looks fine on the chrome inspector, but if you test using a real iPad/ https://www.browserstack.com, it’s the same…

Can you please advise?

What I am trying to do is simply make a 4 column row, 2x2 on al iPads! :slight_smile:

Thanks,

#10

Hi there,

I tested the site on an iPad Air 2 and t worked with no problem. It might be a problem of the device you are checking the website in. Kindly clear your device browser cache or use another device to test your website.

Thank you.

#11

I’ve removed cache and also test on iPad. It is the same issue as screenshots above…are you testing on real device or just in chrome instepctor?

Thanks!

#12

Hi There,

Lets update the provided codes a little bit to this:

@media(min-width: 768px) and (max-width: 1024px) {
	  .x-container.flexing {
	  	display: flex;
        flex-wrap: wrap;
    }
	.flexing .x-column.x-1-4 {
		width: 48%;
	}
	.flexing .x-column.x-1-4:nth-child(2n) {
		margin-right: 0;
	}
}

Clear your caching plugins and your device browser’s cache before previewing the page.

Hope it helps,
Cheers!

#13

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