How can I center an image and make it mobile friendly with HTML?

Store Design
1

Hi,

I insert some HTML code in a block, but the image is leaning to the left and I wanted it to be centered on the page.

Additionally, the image is not mobile responsive.

Can you help me?

pmrmatos_0-1701122192555.png
pmrmatos_0-1701122192555.png945×848 91.8 KB

Thanks

Pedro

2

Hello, I’m sorry but I already managed to resolve the previous questions.

Now the problem is that I can’t set the height of the html block. The image is cropped in height.

pmrmatos_0-1701122884973.png
pmrmatos_0-1701122884973.png877×462 39.6 KB

Can you help me?

Thanks

Pedro

3

Hi @pmrmatos ,

It would be great if you could provide the store URL along with the html and css code (if any). I should be able to test your code and point out the problem you’re having.

4

Hello,

Store URL: https://www.ynspo.com/

No CSS code yet.

HTML:

Thanks

Pedro

5

Hey @pmrmatos ,

You can try the following solution:

In the Online store, select Themes → More → Edit code

Find the file theme.scss.css and add the following code at the end of the file:

iframe[title="advanced chart TradingView widget"]{
 height: 500px;
}

You don’t have to use the number 500px, you can adjust it according to your wishes

Hope my answer helps you @pmrmatos !

6

Hello,
I don’t have a file called theme.scss.css, but I changed it on file theme.scss.liquid.

Did not work. The section doesn’t stretch in height and that’s what I needed.
Can you please help?

Thanks

Pedro