-
AuthorPosts
-
November 16, 2023 at 9:31 pm #1425780
On my homepage, I have a section called Industries We Serve, which looks great on desktop bu ton mobile after the third block, there is an empty space, how can I move up the blocks so there are no empty spaces on mobile?
screenshot. – https://ibb.co/FXvwx31
Please see url below
November 17, 2023 at 7:25 am #1425807Hi navindesigns,
Would it be okay if we make it one column instead for mobile?
Best regards,
NikkoNovember 17, 2023 at 2:59 pm #1425840can we do 3? 1 just takes up so much space vertically
November 17, 2023 at 4:32 pm #1425846Hi navindesigns,
The 3rd item will not be visible on the screen if forced to 3, I’ll give two solutions then you can choose whichever you prefer:
Please replace this code in your Quick CSS:@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable { display:grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 20px } .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder { display: none } }
For 3 columns, replace it with:
@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable { display:grid; grid-template-columns: repeat(3,1fr); grid-column-gap: 20px } .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder { display: none } }
For 1 column, please replace it with:
@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable { display: grid; grid-template-columns: 1fr; grid-column-gap: 20px; margin-top: 0; } .responsive #top.home #wrap_all #av_section_5 .av-equal-height-column-flextable .av-flex-placeholder { display: none } .responsive #top.home #wrap_all #av_section_5 h1 { margin-bottom: 30px; } }
Hope it helps.
Best regards,
NikkoNovember 17, 2023 at 4:37 pm #1425851I really want 2 columns but you code did not work
see comments below
- This reply was modified 1 year, 1 month ago by navindesigns.
November 17, 2023 at 4:52 pm #1425854Hi navindesigns,
This is the expected output for the code I gave:
can you put the code back?Best regards,
NikkoNovember 17, 2023 at 5:21 pm #1425861I dont need any code for 1 column (the default enfold works for one column)
I will jusst stick to one colum and create a separate block for mobile that can show 2 columnsthanks
November 17, 2023 at 5:22 pm #1425863Hi navindesigns,
I think that’s a simpler work around for it since the current layout is really complex to workaround with even with CSS.
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.