Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1336727

    Hi

    Please tell me how to force mobile view on devices below 1024px
    so 3 columns become one

    link for reference https://canonwindows.co.uk

    #1336751

    Hey PhatJ,
    Thank you for the link to your site, I assume that you only want the “TAKE A LOOK AROUND” section to convert from 3 columns to 1 below 1024px, so please try this css:

    @media only screen and (max-width: 1023px) { 
    	#top.home #av_section_3 .flex_column_table,
    	#top.home #av_section_3 .flex_column_table_cell {
        display: block;
        width: 100%;
        margin-left: 0;
    	}
    }

    please note that the first three 1/3 columns do not have a top margin set like the bottom three, so when the section is forced into a single column the first three columns have no space between them link the bottom three, please compare the settings and try to match. If you can’t I can add css to this solution to correct, if you wish.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1336754

    That works for me.
    If I want to do it site-wide what CSS would I use for that, please?

    #1336758

    Hi,
    You could try this css but you’ll want to examine each page to ensure there are no conflicts

    @media only screen and (max-width: 1023px) { 
    	#top .flex_column_table,
    	#top .flex_column_table_cell {
        display: block;
        width: 100%;
        margin-left: 0;
    	}
    }

    Best regards,
    Mike

    #1336804

    thank you

    #1336863

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.