Home page incorrect stacking images in Mobile View

Site URL: http://www.danncooper.co.uk/

Good afternoon,

I'm having some issues with my mobile view. I basically want the home page on my mobile site to have the same stacking settings as the home page on desktop - for the menu I'm happy to keep that at the top.

I've tried disabling mobile view for the whole site, which works for the home page but the rest of the site is then harder to use.

I've attached pictures if this doesn't make any sense!! Any advice would be massively appreciated!! Thanks, Dann

You mean, layout

1-2-1-2-3-2?

Yes, sorry layout!

On 5/19/2021 at 4:41 PM, dann said:

Yes, sorry layout!

Add to Design > Custom CSS

/* Mobile layout */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1621501456296_11946+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1590741601929_12425+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-5d468f841c7ed7000169747b>.row:nth-child(2) .span-4 {
    width: 33.3333% !important;
    float: left !important;
}
div#page-5d468f841c7ed7000169747b>.row:nth-child(3) .span-6 {
    width: 50% !important;
    float: left !important;
}
}

That's amazing thank you so much! Is there also a way to reduce the padding between the image/video blocks or is that a feature just for version 7.1?

20 hours ago, dann said:

That's amazing thank you so much! Is there also a way to reduce the padding between the image/video blocks or is that a feature just for version 7.1?

Add to Design > Custom CSS

/* Blocks padding */
@media screen and (max-width:640px) {
div#page-5d468f841c7ed7000169747b .sqs-block {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}

On 5/20/2021 at 3:41 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile layout */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1621501456296_11946+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1590741601929_12425+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
div#page-5d468f841c7ed7000169747b>.row:nth-child(2) .span-4 {
    width: 33.3333% !important;
    float: left !important;
}
div#page-5d468f841c7ed7000169747b>.row:nth-child(3) .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Good morning,

Thanks for all your help on this! I’ve tried adding a block below the others so I didn’t mess with the layout but it’s changed the 2nd row so now the layout is incorrect again, will I need to change the css? 
 

danncooper.co.uk

thanks, Dann 

On 6/8/2021 at 3:49 PM, dann said:

Good morning,

Thanks for all your help on this! I’ve tried adding a block below the others so I didn’t mess with the layout but it’s changed the 2nd row so now the layout is incorrect again, will I need to change the css? 
 

danncooper.co.uk

thanks, Dann 

Don't remove any code in your current code

Add this to Design > Custom CSS

/* Mobile layout */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1622624086606_11605+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

Thank you!!