My images are being automatically resized smaller on custom page

JohnnySmoke
Excursionist
12 1 2

Hi, Hoping I can get some assistance with this. 

I'm making a custom page and I have a "hero" image for it.  The image size is 1024x554px  I selected "Original size" when I added it. 

In the html editor it looks correct, but when I view the page, it's constraining my image and shrinking it down.

Here's my code. 

<p style="text-align: center;">There was a time when what you wore made a statement. <br />Hand printed, painted, sewn by a loved one; your clothing was an extension of you.</p>
<div style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0421/1608/7974/files/sun-city-rags-apparel-1024.jpg?v=1619914302" alt="" /></div>
<p style="text-align: center;">We’ve brought that back. Every piece curated &amp; customized by us, by hand.</p>

 

thanks so much.

0 Likes
JohnnySmoke
Excursionist
12 1 2

Also... when I add width / height tags it makes my image look stretched out. Which is kind of crazy since I'm specifying the exact dimensions of the image I'm using. 

0 Likes
JohnnySmoke
Excursionist
12 1 2

ok... 

sooo apparently after digging on my own it has something to do with page margins set I assume to assist in making images scale for mobile?

this snippet :

/*================ Indented article/page images and blockquotes ================*/
.rte--indented-images {
img:not([style]),
img[style="float: none;"] {
max-width: 120%;
margin-left: -10%;

// Class added if image isn't wider than parent
&.rte__no-indent {
margin: 0 auto;
max-width: 100%;
}

I assume adjusting the margin-width would make the image larger... and then adjusting the margin-left would center it??

I'm not a programmer... But I think that would make it not scale correctly on mobile.. right?

Appreciate any help here.

thanks.

0 Likes
JohnnySmoke
Excursionist
12 1 2

ok... I appreciate any help I can get on this. 

If someone could just tell me why this main image at the top is getting resized smaller.. that would be a HUGE help.

It should be 1024 wide. I have it set to original size. There's no reason I can see that it should be displaying smaller.

thanks.

https://suncityrags.com/pages/apparel-1

Code:

<div class="p1" style="text-align: center;">There was a time when what you wore made a statement. Hand printed, painted, sewn by a loved one; your clothing was an extension of you.</div>
<div class="p1" style="text-align: center;">We’ve brought that back. Every piece curated &amp; customized by us, by hand.</div>
<img src="https://cdn.shopify.com/s/files/1/0421/1608/7974/files/sun-city-rags-apparel-1024.jpg?v=1619940903" alt="" />

0 Likes