Images in my blog aren't properly responding to mobile

Support
#1

Hi Support!

I’m having issues with my blog images not responding properly to mobile. Please see screenshot:

It’s this way for all of our images in mobile view. I saw in another support ticket where there wasn’t any settings to adjust this in X theme and to ask support about it.

Any help is much appreciated.

Thanks!

#2

Hi There,

Upon checking your website, I could see that you’ve set the fixed width for your images.

Please switch to the Max width instead. Because the fixed width will not change on the mobile version:

Hope it helps :slight_smile:

#3

Thanks so much, that was my issue. I should’ve realized it was something I was doing wrong. :sweat_smile:

#4

Glad to hear it’s sorted. :slight_smile:

#5

Hi Support, I just realized some of my headings are being cut off as well in mobile view. Here is a screenshot:

I’m pretty sure my coding is not the best. This is the code I’ve been using for my headings:
I’m just not sure how to make that responsive.

#6

Hi there,

Please add this code in the Global CSS:

@media (max-width: 480px) {
    .entry-content * {
        word-break: break-all;
    }
}

Here are some reference links related to the suggestions above:

Hope this helps.

#7

This sort of helped, but didn’t fix the issue really. Please see screenshot…
Is there anyway to specify mobile? So, on desktop it would read “The NavigationTradeTracker” but on mobile it would break down to into 4 separate lines.

I just don’t want it breaking off at weird spots. I did try to working this out myself but I couldn’t get it working correctly.

Any help is much appreciated.

#8

The
Navigation
Trade
Tracker

That would be how I would want it to break down.

Twitter embeds in inline slider don 't work on mobile
#9

Hello There,

Thanks for updating in!

You may update the code and use this:

@media (max-width: 480px) {
  .entry-content * {
    word-break: break-word;
  }
}

Please also keep in mind that you have inserted your title as one word with no space in between.

Hope this helps. Please let us know how it goes.

#10

Hi again,

I appreciate the help. The NavigationTradeTracker is a title of one of our tools, so i realize that there are no spaces. I did insert your code, but I got the same result as I had before. In this scenario, I’m ok with it breaking down The NavigationTradeTracker to

The
Navigation
Trade
Tracker

for the sake of looking better on mobile. We want it to display correctly for desktop, but then break down at the most natural breaks for mobile. Right now it still reads

The
Navigation
Tradetrack
er

Is there something I can do to have two separate headings, one for desktop and one for mobile and just hide one or the other depending on how wide their device screen is?

Sorry for any vagueness on my part.

#11

Hi there,

What you’re aiming to do is not achievable by adding a custom CSS.

As a workaround, you can place the The NavigationTradeTracker text in two separate text elements then use the Hide During Breakpoints of the text two text elements to control which screensize each headline should be displayed.

Please check the screencast below:

Hope this helps.

#12

Thank you so much! That was all I needed.

#13

You are most welcome. :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.