Site is full width but image is not

[sloemoe]

I am trying to get my image to be full width (http://workamapro.com). I’m using PRO, Icon. Page Template is set to “No container”.

[friech]

Hi @sloemoe,

Thank you for writing in, we can force an image to be full width by adding the following custom CSS on the Element CSS of the image element.

$el.x-image,
$el.x-image img {
	width: 100%;
}

Please keep in mind that this will stretch small images and will look blurry, so use a high-quality image.

Hope it helps,
Cheers!

[sloemoe]

Thank you so much. Can you help me understand why my image is currently not-fullwidth? It seems like most if not all sites I personally visit today (B2B, professional services) essentially have sites that are full width for all elements regardless of screen size. I’m trying to figure out which standard within general image best practices or within X/PRO that I am ignoring or missing. The custom code is great, by the way, and I really appreciate it. Just trying to make sure I understand what I’m doing and/or what I’m not-doing correctly.

Have I inadvertently added a Sidebar by using the Icon stack? Is that what is occupying the “blank” space on the right of my screen?

[jade]

Hi there,

It seems to be caused by some settings that the Jetpack plugin enforced on the site’s images.

Please try disabling Jetpack then clear your site’s cache and see if the images display normally.

If it fixes the issue, you will need to change some settings in the Jetpack plugin.

If the issue persists, please provide us with the admin access to your site in a Secure Note (key icon under the replies you post/posted):

Hope this helps.

[friech]

Hi @sloemoe,

Thanks for the credentials but it did not work, please check. Please inspect your element then under the customize tab you’ll see the Element CSS area, please add the code I provided in there.

Then remove that -50px margin you applied on the image.

Cheers!

[sloemoe]

My apologies, the ‘Add new user’ did not save. I have added and confirmed, and have updated the secure note credentials.

[friech]

Hi @sloemoe,

Sorry but the credentials still not working, please test it yourself first.

Hey, your image is fullwidth now, please clear your browser’s cache.

Thanks,

[sloemoe]

Again, apologies, I think I changed the password but didn’t save it properly. I have now updated the password, logged out and used the updated credentials to sign in. I have updated the Secure note. I do understand the site is full width (it is working for me too). However, I’d really like to understand why it wasn’t working in the first place so I can avoid this in the future. Hoping you can help me find out why. Thanks in advance!

[ruenel]

Hello @Sloemoe,

Can you please point out which image you are talking about? We can only see the hero image which is full width and the book cover in your homepage. The hero image is already fullwidth since it is a background image of the section. The book cover on the other hand is also fullwidth which covers the while column width. You might noticed that the row has some space on the left and right, that is because you have enabled the inner container in the row settings.

By the way, the book cover is a fullwidth width but not visually because the are some spaces around it in the original image.

http://www.workamapro.com/wp-content/uploads/2017/07/workamapro-3.jpg

Hope this helps.

[sloemoe]

The homepage image is full width only after I implemented the css code that you sent and recommended. I am wondering why this code was needed in the first place so that I don’t have to use custom css on an image. I’m trying to figure out why there was a problem so I can avoid it in the future.

[rad]

Hi @sloemoe,

It’s normal, the image could and should only be displayed on its maximum size (it’s actual size), else, it will be blurry and stretched.

Example, let’s say you displayed an image of 900px, but your screen is 1366px then it will remain 900px, stretching it to 900px will be blurry. BUT, if you upload an image with 2600px, then it will appear full-width since it’s still smaller than 1366px.

And toggle off that CSS through browser developer tools and it remains full-width on my end. May I know what screenshot you’re viewing it? Or do you use browser’s zoom feature?

Thanks!