Tablet Responsive 1/4 to 1/2

[walkertron]

Hello,

For columns set as 1/4 1/4 1/4 1/4, on tablet view, I would like the columns to show as 1/2 1/2

Currently, I have tried

@media (max-width:767px) and (min-width:480px){
.x-column.x-sm.x-1-4 {
width: 48% !important;
float: left !important;
}
}

However, the second column is not aligned correctly right next to the second and fourth quarters with the rest of the site.

Is there an alternative or improvement to this CSS I could use?

The site is vf.systematicprint.com

Many thanks

[Joao]

Hi There,

Everything looks aligned here

Please clarify.

Thank you

[walkertron]

Hello, please see below. The right hand columns do not align with the rest of the site content. This is consistent wherever there are 1/4 columns dropping into 1/2 columns.

Hope that clarifies things.

Thanks

[walkertron]

Update:

The alignment issue was due to margins and padding being set within the visual editor, corrections to this it is now displaying correctly with the following code

@media (max-width:767px) and (min-width:480px){
.x-column.x-sm.x-1-4 > div:nth-child(1) {
  float:left;
  width:50%; 
}
}
@media (max-width:767px) and (min-width:480px){
.x-column.x-sm.x-1-4 > div:nth-child(2) {
  float:right;
  width:50%;  
}
} 

Just in case it helps anyone else.

Thanks

[Joao]

Glad to see you managed to solve it

Thank you