Column breakpoint adjustment

Support
#1

Hi there see:

So I want this section on an ipad to behave like it does on a mobile:

Ipad:

Mobile: * note the line has css to make it invisible…

Thanks.

#2

Hi @logoglo,

Please check this guide about media query
Add the following on your page custom CSS.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
div#x-content-band-7 .x-1-3 {
    display: block;
    width: 100%;
}
}

The CSS adjust the column size on IPAD.

The following might also help:

#3

I added the code, but it doesnt seam to do anything, sorry.

#4

Hello @logoglo,

Please update the css and use this instead:

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  #x-content-band-8 .x-1-3 {
    display: block;
    width: 100%;
  }
}

We would love to know if this has worked for you. Thank you.

#5

That worked for the portrait view, but now the landscape view is messed up: *should look similar to the desktop

Also, I have noticed, on the desktop, I have a - gap to reduce the space under the left “6 trillion” headline, but on the ipad, this gap shrinks even more, anyway of keeping it the same?

Thanks.

#6

Hi @logoglo ,

Please update the media query and use the one specific for PORTRAIT

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

No need for that GAP element. To make it close to each other please try this:
1.) Remove the GAP element.
2.) Change this:
<p style="color: #fff;"><strong>$6 TRILLION</strong></p>
To this:
<strong>$6 TRILLION</strong>
On the style field of the element, add this instead: color: #fff;
3.) Edit this headline COST OF CYBERCRIME DAMAGES BY 2021 on the class field add mtn. That class will reset default header margin to zero.

Hope this helps.

#7

Thanks, but its still displaying incorrectly:

Also, I cant do the steps for the headline, as its already been assigned a class to make it centered on a mobile device.

#8

Also, another issue. I have this code:

@media (max-width: 979px){
    .page-id-290 .x-column.x-1-2 {
        width: 100%;
    }

To make this section display well on an ipad portrait:

I duplicated the content band below, and swapped them left and right, and I assumed it would work for that section too, but its not:

Could you have a look?

Thanks.

#9

Hey @logoglo,

Can you please update the code and use this?

@media (max-width: 979px) {
  /* For general iPad layouts */
  #x-content-band-8 .x-1-3 {
    display: block;
    width: 100%;
  }
}

And this code below will only work for that page:

@media (max-width: 979px){
    .page-id-290 .x-column.x-1-2 {
        width: 100%;
    }
}

Just make sure that the “Marginless Column” option is not enabled because that is what is causing why the css code does not have any effect on that section.

Hope this helps.

1 Like
#10

Perfect! that fixed both issues…this is why I love you @RueNel

#11

You’re most welcome @logoglo!
We’re glad we were able to help you out.

#12

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