Blog columns mobile breakpoint

Site URL: https://www.ukrainiandanceworld.com/dance-groups-test1234

Hi there,

I have multiple blog pages on my website and they already have custom CSS. In this example I have a blog page where i have expanded the columns to 8 on desktop but on the mobile breakpoint I would ideally like 2 or 3 columns. Below CSS doesnt seem to be working and is still presenting one column in mobile?

Any help woud be appreciated

//columns number dance group (new)- desktop
section[data-section-id="6265da30a06e8a480cbe78d2"] 
.blog-basic-grid { grid-template-columns: repeat(8, 1fr) !important;
}

//columns number dance group (new) - mobile
@media only screen and (max-width: 768px) 
{section[data-section-id="6265da30a06e8a480cbe78d2"] 
.blog-basic-grid { grid-template-columns: repeat(3, 1fr) !important;
}
}

5 hours ago, Maksymrewko said:

//columns number dance group (new)- desktop
section[data-section-id="6265da30a06e8a480cbe78d2"] 
.blog-basic-grid { grid-template-columns: repeat(8, 1fr) !important;
}

//columns number dance group (new) - mobile
@media only screen and (max-width: 768px) 
{section[data-section-id="6265da30a06e8a480cbe78d2"] 
.blog-basic-grid { grid-template-columns: repeat(3, 1fr) !important;
}
}

Try this adjustment of your code:

//columns number dance group (new)- desktop
section[data-section-id="6265da30a06e8a480cbe78d2"] .blog-basic-grid { 
  grid-template-columns: repeat(8, 1fr) !important;
}

//columns number dance group (new) - mobile
@media only screen and (max-width:768px) { 
section[data-section-id="6265da30a06e8a480cbe78d2"] #gridThumbs {
    grid-template-columns: 1fr 1fr !important;
 }
}

Please let me know if this works (or not), and upvote if it does!

@Ziggy thanks for your reply - unfortuantely the code adjustment didnt work.

On 9/16/2022 at 10:36 AM, Maksymrewko said:

thanks for your reply - unfortuantely the code adjustment didnt work.

Try this new code

//columns number dance group (new)- desktop //
section[data-section-id="6265da30a06e8a480cbe78d2"] .blog-basic-grid { 
  grid-template-columns: repeat(8, 1fr) !important;
}

//columns number dance group (new) - mobile //
@media only screen and (max-width:768px) { 
section[data-section-id="6265da30a06e8a480cbe78d2"] #gridThumbs {
    grid-template-columns: 1fr 1fr !important;
 }
}

On 9/17/2022 at 11:08 PM, tuanphan said:

Try this new code

//columns number dance group (new)- desktop //
section[data-section-id="6265da30a06e8a480cbe78d2"] .blog-basic-grid { 
  grid-template-columns: repeat(8, 1fr) !important;
}

//columns number dance group (new) - mobile //
@media only screen and (max-width:768px) { 
section[data-section-id="6265da30a06e8a480cbe78d2"] #gridThumbs {
    grid-template-columns: 1fr 1fr !important;
 }
}

 

@tuanphan unfortunalty this code doesn't work. I'm still seeing one column in the mobile breakpoint

13 hours ago, Maksymrewko said:

@tuanphan unfortunalty this code doesn't work. I'm still seeing one column in the mobile breakpoint

The url doesn't exist now. Can you check it again?

On 9/30/2022 at 4:28 AM, tuanphan said:

The url doesn't exist now. Can you check it again?

Hi Tuanphan,

I managed to solve this with the lazy summaries plug in - all sorted now

Many thanks

Maksym