Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 7, 2022 at 7:40 pm #1347610
    justinteo85

    Hi,

    I would like to have 3 columns on my Blog Post grid showing in both desktop and mobile. However, the theme defaults to just 1 column on mobile when I set it for 3 columns (appears fine on desktop). How can I make the blog post grid appear in 3 columns also in mobile view?

    Here’s an example of what I am referring to: https://drtwlderma.com/product-icons/

    April 8, 2022 at 4:41 am #1347661
    Mike

    Hey justinteo85,
    Thank you for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 767px) { 
body #wrap_all #main div .first, 
body #wrap_all #main div .no_margin {
    margin-left: 0;
}
body #wrap_all #main .unit.alpha, 
body #wrap_all #main .units.alpha, 
body #wrap_all #main div .first {
    margin-left: 0;
    clear: left;
}
#wrap_all #main div .av_one_third,
.responsive #top #wrap_all #main .avia-content-slider-odd .slide-entry {
    margin-left: 4%;
    width: 29.333333333333332%;
}
.responsive #top #wrap_all #main .avia-content-slider-odd .slide-entry.first {
	margin-left: 2%;
    width: 29.333333333333332%;
}
#wrap_all #main div .flex_column {
    z-index: 1;
    float: left;
    position: relative;
    min-height: 1px;
}
#wrap_all #main .avia-content-slider .slide-entry-wrap {
    width: 100%;
    float: left;
    margin-bottom: 40px;
}
.responsive #top #wrap_all #main .avia-content-slider-odd .slide-entry,
.responsive #top #wrap_all #main .avia-content-slider-even .slide-entry.slide-parity-odd, 
.responsive #top #wrap_all #main .avia-content-slider-odd .slide-entry.slide-parity-even {
	clear: none;
}
}

    After applying the css, please clear your browser cache and check.
    This is the expected results
    2022-04-07_004.jpg

    Best regards,
    Mike

    April 12, 2022 at 7:15 am #1348044
    justinteo85

    Hi Mike, many thanks for this! It works great, except I need the custom css to be applied only on a certain page. When I insert the the page id css, it seems to break the code. Can you help advise how I should insert the page id into the custom css? .page-id-158578

    • This reply was modified 3 years, 1 month ago by justinteo85.
    April 12, 2022 at 12:16 pm #1348092
    Mike

    Hi,
    Glad to hear this helps, try this css to assign the page ID:

    @media only screen and (max-width: 767px) { 
#top.page-id-158578 #wrap_all #main div .first, 
#top.page-id-158578 #wrap_all #main div .no_margin {
    margin-left: 0;
}
#top.page-id-158578 #wrap_all #main .unit.alpha, 
#top.page-id-158578 #wrap_all #main .units.alpha, 
#top.page-id-158578 #wrap_all #main div .first {
    margin-left: 0;
    clear: left;
}
#top.page-id-158578 #wrap_all #main div .av_one_third,
.responsive #top.page-id-158578 #wrap_all #main .avia-content-slider-odd .slide-entry {
    margin-left: 4%;
    width: 29.333333333333332%;
}
.responsive #top.page-id-158578 #wrap_all #main .avia-content-slider-odd .slide-entry.first {
	margin-left: 2%;
    width: 29.333333333333332%;
}
#top.page-id-158578 #wrap_all #main div .flex_column {
    z-index: 1;
    float: left;
    position: relative;
    min-height: 1px;
}
#top.page-id-158578 #wrap_all #main .avia-content-slider .slide-entry-wrap {
    width: 100%;
    float: left;
    margin-bottom: 40px;
}
.responsive #top.page-id-158578 #wrap_all #main .avia-content-slider-odd .slide-entry,
.responsive #top.page-id-158578 #wrap_all #main .avia-content-slider-even .slide-entry.slide-parity-odd, 
.responsive #top.page-id-158578 #wrap_all #main .avia-content-slider-odd .slide-entry.slide-parity-even {
	clear: none;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 12, 2022 at 7:08 pm #1348153
    justinteo85

    This works perfectly, thank you so much for your help Mike!

    April 13, 2022 at 6:14 am #1348185
    Ismael

    Hi,

    Glad @Mike was able to help. Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Blog Post Grid 3 Columns on both Desktop and Mobile’ is closed to new replies.