Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 15, 2021 at 4:24 pm #1294592
    phouthuijzen

    Hi,
    I have two one_fourth columns. On mobile they scale nicely under each other. However, not on a tablet, so that the text is not beautiful. How can I ensure that even on larger screens, such as a tablet, the second 1/4 column is placed below the other? I tried different CSS codes, but unfortunately I have not yet found the solution.

    I put the link in the private content. It concerns the colored boxes where the picture is (left) and text with button (right)

    thanks in advance!

    Kind Regards,

    • This topic was modified 4 years, 6 months ago by phouthuijzen.
    April 19, 2021 at 5:06 am #1295072
    Rikard

    Hey phouthuijzen,

    Please try this in Quick CSS:

    @media only screen and (max-width: 1024px) {
main.content .av_one_fourth {
    width: 100%;
}
}

    This will apply globally to your site, that means that all 1/4 elements will be affected by it on tablet sizes. If you want more specific CSS, then please let us know.

    Best regards,
    Rikard

    April 19, 2021 at 9:16 am #1295172
    phouthuijzen

    Hi Rikard,

    Unfortunately it doesn’t work.I put an example in the private content how it looks with this CSS. Unfortunately no difference.

    Best Regards,

    April 20, 2021 at 11:12 am #1295494
    Nikko

    Hi phouthuijzen,

    Can you try adding this CSS code in Quick CSS:

    @media only screen and (max-width: 1024px) and (min-width:768px) {
  #top.page-id-1387 .no_margin.av_one_fourth {
    width: 50%;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    April 21, 2021 at 9:05 am #1295724
    phouthuijzen

    Hi Nikko,

    Thank you. This CSS works, but i want it for my whole site, and with this CSS code it is only for page-id-1397. Can you change the above CSS code for my whole site?

    Best Regards,

    April 21, 2021 at 11:32 am #1295779
    Nikko

    Hi phouthuijzen,

    You can use this code to make it global:

    @media only screen and (max-width: 1024px) and (min-width:768px) {
  #top .no_margin.av_one_fourth {
    width: 50%;
  }
}

    Let us know if this helps.

    Best regards,
    Nikko

    April 21, 2021 at 11:37 am #1295784
    phouthuijzen

    Hi Nikko,

    Yes this helps! Thank you!

    Best Regerds,

    April 21, 2021 at 2:08 pm #1295803
    Nikko

    Hi phouthuijzen,

    We’re happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change breakpoint of two one_fourth coloms’ is closed to new replies.