related posts for single post: featured posts squished together; culprit: having col-2, col-3 etc.,

championbets · August 2019

there is something wrong with your related post, it is squished together and i've noticed that is using the col-3 with a css value of max-width: 25%; see below css declaration, when i take out the max-width from "25%" to "unset" it will go back to normal all three related posts are not squished together. also i havent changed or added a custom css using the class "section-related-ul" "col-3".

when i changed the option settings under the blog > related posts (for single post) > columns > toggle 2 to 6 it only got worst it will squished further.

also wondering why there is a columns for related post, i dont get it. it works when i set the max-width value for each following class ( col-2, col-3, col-4, col-5, col-6 ) to "unset".

when the columns are selected on the options settings ( blog > related posts (for single post) > columns > toggle 2 to 6 ), this should not be on the option panel and in the related posts html.

.col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

fixed:

.section-related-ul.col-3 {
max-width: unset;
}

even in the blog post roll option is set to classic and there is a
column that is intended for masonry, grid style. but the classic
style uses the columns col-2 and the width is squished, i have to set a custom css for
the class col-2 and col-3 with a custom value of "unset" so that it wont squished together. i
think there is definitely wrong with your css mark-up.

this is from the responsive viewport from width of 375px to 1024px

.col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

fixed:

.posts_group.lm_wrapper.col-2.classic {
max-width: unset;
}

for now the fixed for me is to give a value of "unset" for max-width for the class .col-2 and .col-3 for each problem like related posts and blog posts

how to fix this? or rather there is something wrong with your css?

Theme: betheme > betheme child theme

Theme: Version 21.3.1.1

Pablo · August 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co

The "max-width" value is calculated by the script automatically and it shouldn't be overwritten by custom css code.

It could affect with problem of responsiveness and css grid problems.

thanks

championbets · August 2019

the site is live i have to fixed it with the custom code. by using unset value to fix the issue with col-1 col-2 col-3 and here are the links where the problem occurs, i have thoroughly check the site again if this problem persist in other parts of the site. there is something wrong with your grid framework, please fix it.

https://www.sportspredictor.com/sports-betting-sins/
https://www.sportspredictor.com/my-account/

here is the screenshot for the my-account signup and login form

https://snipboard.io/N4mG1P.jpg

https://snipboard.io/T6Zgpa.jpg

https://snipboard.io/WKPgQh.jpg

same as the blog related posts

https://snipboard.io/QLeuah.jpg
https://snipboard.io/uNQFJa.jpg