Stack Of Columns On Ipad Landscape Not Looking Good - Question | JoomShaper

Stack Of Columns On Ipad Landscape Not Looking Good

Alison

Alison

SP Page Builder 6 days ago

Hi

On this page https://wilmcoteparish.gov.uk/ the three columns showing 'Upcoming meeting dates', 'Latest meeting papers' and 'Latest document uploads' do not stack into one column until the screen is ipad portrait size.

How do I get them to stack into one column sooner as it looks terrible on an ipad in landscape view.

Thanks Alison

0
7 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 days ago #218556

Hello Alison,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

I assume that you need to write Custom CSS to fix this. Please share your administrator access here to check the issue. Use the Hidden Content box to share the credentials. Make sure that you have a full site backup before sharing. I will try to help you.

Best regards

0
Alison
Alison
Accepted Answer
3 days ago #218606

Thanks Ofi, details below

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 4 days ago #218557

Hello,

Thanks for reaching out to us.

This is a responsive issues, as a quick fix, Please, add this css in your custom css:

@media (max-width: 991.98px) {
    #column-wrap-id-Puj_S06pcoDPhPUnfz4Dn,
        #column-wrap-id-9O0NL3F6Z4qXrB0eaMaD_,
        {
        max-width: 50%;
        flex-basis: 50%;
    }
}
@media (max-width: 991.98px) {
    #column-wrap-id-wNkaaEy_sobM7v22jB0PZ {
        max-width: 100%;
        flex-basis: 100%;
        margin-top: 30px;
    }
}

Thanks

0
Alison
Alison
Accepted Answer
3 days ago #218604

This doesn't quite work, it only puts the third column onto it's own row. I tried the code into the template custom CSS and in the custom.css folder

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 3 days ago #218673

In the frontend editor, you will see device-based responsive options. Switch to tablet mode, then click the blue three-dot icon. From there, select Options. You will see the column -> basic -> width for tablet mode—set it to 50%. This will resolve your responsive issues. I’ve already applied this setting for you.

Thanks!

0
Alison
Alison
Accepted Answer
2 days ago #218718

Thanks Ziaul

that is a great tip, every day is a school day! All good now. :)

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 days ago #218791

You are welcome. We greatly value your opinion and would love to hear your feedback about SP Page Builder. If you could spare a moment, it would mean a lot to us!

You can share your review here:

Joomla Extensions Directory

Trustpilot

0