Mobile Descriptions or Mobile Responsive Image

[Emilio_F_Castillo]

Mobile Descriptions or Mobile Responsive Image

We have recently added images to our category view in hopes of improving our visitor experience on both desktop and mobile versions.

The mobile version yields a “trapped” white space to the right of the image. On the desktop version, this area shows the description.

Is there a way to:

• Make sure the description appears to the right of the image on mobile?
• Or can we make the image responsive so that it fills the entire width of the mobile view?

Anything but a blank or trapped white space next to the image would be best.

See Sample Screen Shot Below:

[tshenry (Taylor)]

Can you try adding this to your Mobile CSS:

.category-logo {
   max-height: none !important;
   max-width: 112% !important;
}

Make sure you hit the Mobile tab. It should look like this:

Result:

Even if you like the effect right away, you should definitely do some testing with it to make sure it doesn’t have any adverse side effects. The logos are a little large in landscape orientation, but see what you think.

[Emilio_F_Castillo]

Thank you for this. The CSS code you shared certainly puts us in a better place. I wish we could have the description in that blank space on mobile, but if expanding the image is the only way to go, then we can make do. The main issue I still see with mobile after the CSS code was applied is if we click on the image to drill down deeper into the actual category, the image swells up and bleeds off the screen. It is ok, for so long as the category view in the screenshot above is in place, but once we drill down into a certain category the image blows up just a beyond the frame.

But lets before we firm up the mobile…here is what the table view is doing…

The tablet view needs some work when the table is held upright (vertical). The Horizontal or landscape view on a table renders fine. Here is what the verticle view yields… anyway we can “CSS” our way of this?:

[tshenry (Taylor)]

Try adding this to the desktop CSS to fix the text appearing to the side of the category logo on the tablet:

div.category-description  {
   display: inline-block;
}

And to fix the image swelling deeper in the actual category, try adding this to the Mobile CSS (you can replace the code in my previous post with this):

.topic-list .category-logo {
   max-height: none !important;
   max-width: 112% !important;
}

section.category-heading .category-logo {
   max-height: none !important;
}

Let me know if there are any other aspects that this messes with.

[tshenry (Taylor)]

Also try adding this to the Desktop CSS to maintain consistency between between vertical and horizontal orientations. Note: these changes to the Desktop CSS will affect both tablet and desktop browsers. Personally I think it looks very nice though!

.category-list .category-logo {
   max-height: none !important;
   max-width: 100% !important;
}

Horizontal:

Vertical:

[Emilio_F_Castillo]

.category-list .category-logo {
max-height: none !important;
max-width: 100% !important;
}

Well done friend. All CSS codes working together do in fact resolve my issue.

Thank you.