CMS Development

MWeaver94
Participant

Slide In Images - images size not responsive in mobile view

Hi there!

 

I've created a Slide In module to be displayed on our main website. The Desktop and Tabelt previews look the way I'd like, but Mobile looks terrible. The image I'm using with it becomes huge, even though I have it at 350x350 pixels. It was imported at a larger pixel dimemsion, but was adjusted within the module. Is there any workaround for this? Is there a way to make this module more responsive? If not, I'm considering just not having it display on Mobile. TIA!

 

Tablet.PNGDesktop.PNG

Mobile.PNG

 

0 Upvotes
3 Replies 3
Markestac
Member | Gold Partner
Member | Gold Partner

Slide In Images - images size not responsive in mobile view

Hey @MWeaver94 
It seems the issue may be related to the width of the module wrapper. I suggest setting a defined width for the wrapper using a media query for mobile devices. This should ensure that the image automatically resizes appropriately.

Additionally, if the text appears too small, you could slightly increase the font size to maintain balance within the layout. If the issue persists, another option would be to apply a specific width to the image itself for better control over its size.

If you continue to experience difficulties, feel free to share your code, and we can work on a more detailed and customized solution.
Best regards

0 Upvotes
MWeaver94
Participant

Slide In Images - images size not responsive in mobile view

Hi there! What is a Media Query, and how woudl I make one? I also don't see an option anywhere in the editing pages that let's me add in customer code either 😞

0 Upvotes
Jnix284
Hall of Famer

Slide In Images - images size not responsive in mobile view

@MWeaver94 Without seeing the code, it's hard to say why the image isn't behaving responsively on mobile. @Anton or @Teun could help with that, but from a user experience perspective I would disable the slide in module on mobile regardless.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon
0 Upvotes