Column Layout

  • Resolved mohammadia

    (@mohammadia)


    2 years, 9 months ago

    Hello,
    When I create a column with four blocks on desktop,

    when viewed on mobile they appear one-by-one vertically.

    Is there any way to ensure they remain the same like on desktop (all shown horizontally)

    I wouldn’t mind if the size is a bit compromised on the mobile screens.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @mohammadia Thanks for reaching out! You can indeed do this with custom CSS. For us to help with this CSS tweak, can you share with us the link to the page?

    Thread Starter mohammadia

    (@mohammadia)

    Hi, Can you share the CSS code, as the website needs some touch-ups as we speak.

    Would appreciate if you can share it here.

    Hi @mohammadia Here’s a sample CSS code you may modify and use to help retain the 4-column row layout on mobile as on desktop.

    @media screen and (max-width: 640px){
    .sp-el-row{
    display: flex;
    }
    .sp-el-row .sp-el-col{
    width: 25% !important;
    }
    }

    We highly recommend using CSS ID selectors of the row to ensure that only the desired 4-column row is targeted.

    Thread Starter mohammadia

    (@mohammadia)

    The CSS ID selector is #sp-sa23yc

    So how would the code be modified? As the above isnt working

    @mohammadia If this is the selector for the row, this CSS code will be something like this (with additional tweaks/corrections to the previous CSS code):

    @media only screen and (max-width: 640px){
    #sp-xnhnxb{
    display: flex !important;
    }
    #sp-xnhnxb .sp-el-col{
    width: 25% !important;
    }
    }

    Let us know if this helps!

    Thread Starter mohammadia

    (@mohammadia)

    Unfortunately, it doesnt look.

    Please look at the below image.

    View post on imgur.com

    Hi @mohammadia Thanks for the update. When possible, kindly send us the link for this page to generate the CSS code for the desired row. This would be greatly appreciated to give you a working code.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Column Layout’ is closed to new replies.