Blog Formatting on mobile devices.

[Forro-54]

Hi,
I have come across 2 issues to do with the blog module formatting layout on mobile devices particularly Chrome.

1. On Chrome browser the text on the main blog page(Title, Summary and Picture) the summary shifts to the right hand side and is only 2 or 3 words wide.
2. If you set number of posts to show on main page, say to 4 (Title, Summary and Picture) the change page area at the bottom of the screen is not visible, ie: 1 2.
   I have tried this with the default Theme as well as a custom the and results are the same.
   I am no brilliant programmer and I don't know if others have seen this issue but I have used this css to fix both issues:
   by the way, full disclosure I used Chatgpt to help me find a solution.
   /* ===== BLOG LIST: MOBILE-ONLY FIX (Chrome skinny column) ===== /
   @media (max-width: 600px) {
   .ModBlogC .bbs-listarticle figure {
   float: none !important;
   width: auto !important;
   max-width: 100% !important;
   margin: 8px 0 12px 0 !important;
   }
   .ModBlogC .bbs-listarticle figure img {
   display: block;
   max-width: 100%;
   height: auto;
   }
   / Let text take full width on phones */
   .ModBlogC .bbs-listarticle,
   .ModBlogC .bbs-listarticle .content {
   overflow: visible !important;
   }
   }

/* ===== DESKTOP/TABLET: enforce your original float layout ===== /
@media (min-width: 601px) {
.ModBlogC .bbs-listarticle {
display: block !important; / cancel any flex from earlier patch /
}
.ModBlogC .bbs-listarticle figure {
float: left !important; / your original behaviour /
margin: 8px 40px 0 0 !important;
width: 250px !important;
}
.ModBlogC .bbs-listarticle .content {
overflow: hidden !important; / keep text beside the image /
min-width: 0; / harmless here; helps Chrome if flex ever sneaks in */
}
}

/* Clearfix (safe regardless of float/flex) /
.ModBlogC .bbs-listarticle::after {
content: "";
display: table;
clear: both;
}
/ --- Blog pager: make numbers visible on small screens --- /
@media (max-width: 767.98px) {
/ Previously: li { display:none } except .button — that hides numbers on phones */
.ModBlogC .bbs-pager .bbs-pagination li {
display: inline-block !important;
}

/* Let items wrap nicely and avoid off-screen overflow /
.ModBlogC .bbs-pager .bbs-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .4em;
width: 100%;
margin: 2em auto 5em; / extra bottom space so it’s not cut off */
}
}

If this helps anyone that's good but if not just disregard.
Trevor

Software Versions

• DNN: 10.01.02
• Module:6.7.1