Docs

[nickangtc]

Hey X team,

Thanks for maintaining such an amazing WP theme. Best I’ve used so far hands down.

I’m having problems with showing images as full-width on mobile devices (smartphone and tablet). Is there a way to do this?

(I’m using X 4.4.2, and using a child theme.)

Here’s what I’m talking about.

On mobile, the image is embedded in a well (I think it’s called that?), just as it is on the full laptop website.

But what I’d really like to have is for the well to be removed, and for the image to stretch from edge to edge (full-width) on mobile. I’ve attached an example.

Can someone help me figure this out? I couldn’t find the Q&A in your previously asked Qns.

Here’s a link to my site: hushtraveltips.com

Sincerely,
Nick

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 767px){
  .entry-header, 
  .entry-content {
    margin: 0 auto;
    max-width: 88%;
  }

  .entry-wrap > .x-container.max.width {
    width: 100%;
  }

  .entry-wrap .entry-featured {
      border: none;
      padding: 0;
      margin-bottom: 10px;
  }
}

Hope this helps. Kindly let us know.

[nickangtc]

Hi Rue Nel,

It works perfectly. Looks fantastic now, thanks for your help!

Just in case I’d like to change all images (instead of just the featured image) to be full-width on mobile, what CSS should I be adding? They just look so much better stretched out on small screens…

Sincerely,
Nick

[John Ezra]

Hi Nick,

Thanks for updating the thread! This request is a bit tricky, there are a few ways to get all the other images to be full width but doing so will affect the other content one way or the other. Since the images are within the content section of a post, they will be contained inside a parent div container. This is what is limiting the width of the inner images. The featured image is on a separate div which is why it was easier to control.

You can make the width of the parent div container 100%, then make the image with caption width also 100% and remove the padding on it. Then you will need to put side margins on all other content. The CSS below tries to fix all other margins but if you add different elements you may need to add it to the selectors.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width: 767px) {
    .wp-caption {
        padding: 0;
    }

    .wp-caption img {
        width:100%;
    }
    .entry-content {
        margin: 0 auto;
        max-width: 100%;
    }
    .entry-content p,
    .entry-content h3,
    .entry-content h5,
    .entry-content ul,
    .entry-content ol {
        max-width:88%;
        margin-left:auto;
        margin-right:auto
    }
}

Another way is to make the caption images absolute in position. However, this will make it overlap the content below it. The way to overcome that is to add an invisible div right after an image and give it the same size of the image. This will push all other content down.

.wp-caption {
    position: absolute;
    left:0;
    right:0;
    padding: 0;
/*     border: none; */
}

.wp-caption img {
    width:100%;
}

You will then need to add a line like this after every caption image you add.

<div style="height: 420px;">&nbsp;</div>

You will need to adjust the height as you see fit to move the content below it to the right place.

Hope this helps – thanks!

[Author]

Posts