X Theme pics

[openconversations]

How do I get the pictures to stretch from edge to edge in X theme?

[jade]

Hey Milton,

First thing you need to check is that the template that you are using for the page is a Blank Template with No Container.

If the page is already a blank container template page, but the image still does not display fullwidth, check the row setting of the row that contains the image element and make sure that the Column Container (Classic Row element)/Inner Container (V2 Row element) are OFF.

If both are set but the image still does not cover the entire content area, please check the size of the image. If the image is width is less than the width of its container, it will not fill the entire area by default.

To force the image to fill the entire container width, add this code to the Element CSS if you are using a v2 image element:

$el img {
    width: 100%
}

Element CSS | Themeco Docs

Or add this code to the style field if you are using a Classic Image element:

width: 100%;

If you are still not able to get it sorted, please provide the URL of the page in question.

Thank you.

[openconversations]

hi,
I’m using the Ethos layout. I do not see the option for Blank - No container template. please advise.

[openconversations]

sorry, the Renew layout

[friech]

Hi Milton,

Regardless of the stack (Ethos or Renew) you’re using, the Page Template is under Settings > Page Settings

If that did not work, please provide us a sample page URL, so we can take a closer look.

Thanks,

[openconversations]

thanks, found it. however, the picture shifted totally to the left.
url: https://jmdm222275558.wpcomstaging.com/jesus-makes-the-difference-ministries/?preview_id=68&preview_nonce=4bbddd1d3a&preview=true

Regards,

Milton

[ruenel]

Hello Milton,

First, please go to your Jetpack settings and disable the Site Accelerator (Formerly known as Photon module). This module controls the image and it is serving a cache version which will give you some more issues later on.

And your image is not as wide as the browser width. If you want to display it fullwidth, please remove the image element and then add it as a background image for the section instead. In your section settings, you should be able to find the option to add the background image. If it is not displaying then probably the advanced mode is disabled. To enable it, please go to X > Settings > Permission > User Preferences and set it to “Always ON”.

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

[openconversations]

hi,

I did as you suggested and see more of the display. also, enabled the advanced mode in the X settings. I still do not see the option to add the background image. screenshot below:

please advise.

Regards,

Milton

[ruenel]

Hey Milton,

Would you mind providing us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

[christian]

Hey Milton,

Based on your screenshot, it’s an Image element and the Image element does not have a Background Image option. Ruenel was previously referring to a Section.

I see all of your image displayed in the section, by the way, so I think there’s no problem with that anymore.

Thanks.