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

[pmrmatos]

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?

Thanks

Pedro

[pmrmatos]

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.

Can you help me?

Thanks

Pedro

[BSS-Commerce]

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.

[pmrmatos]

Hello,

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

No CSS code yet.

HTML:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a href="https://br.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text"></span></a></div>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
{
"colorTheme": "dark",
"dateRange": "12M",
"showChart": true,
"locale": "br",
"width": "100%",
"height": "100%",
"largeChartUrl": "",
"isTransparent": false,
"showSymbolLogo": true,
"showFloatingTooltip": false,
"plotLineColorGrowing": "rgba(41, 98, 255, 1)",
"plotLineColorFalling": "rgba(41, 98, 255, 1)",
"gridLineColor": "rgba(42, 46, 57, 0)",
"scaleFontColor": "rgba(134, 137, 147, 1)",
"belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
"belowLineFillColorFalling": "rgba(41, 98, 255, 0.12)",
"belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
"belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
"symbolActiveColor": "rgba(41, 98, 255, 0.12)",
"tabs": [
{
"title": "Indices",
"symbols": [
{
"s": "FOREXCOM:SPXUSD",
"d": "S&P 500"
},
{
"s": "FOREXCOM:NSXUSD",
"d": "US 100"
},
{
"s": "FOREXCOM:DJI",
"d": "Dow 30"
},
{
"s": "INDEX:NKY",
"d": "Nikkei 225"
},
{
"s": "INDEX:DEU40",
"d": "DAX Index"
},
{
"s": "FOREXCOM:UKXGBP",
"d": "UK 100"
}
],
"originalTitle": "Indices"
},
{
"title": "Futures",
"symbols": [
{
"s": "CME_MINI:ES1!",
"d": "S&P 500"
},
{
"s": "CME:6E1!",
"d": "Euro"
},
{
"s": "COMEX:GC1!",
"d": "Gold"
},
{
"s": "NYMEX:CL1!",
"d": "WTI Crude Oil"
},
{
"s": "NYMEX:NG1!",
"d": "Gas"
},
{
"s": "CBOT:ZC1!",
"d": "Corn"
}
],
"originalTitle": "Futures"
},
{
"title": "Bonds",
"symbols": [
{
"s": "CBOT:ZB1!",
"d": "T-Bond"
},
{
"s": "CBOT:UB1!",
"d": "Ultra T-Bond"
},
{
"s": "EUREX:FGBL1!",
"d": "Euro Bund"
},
{
"s": "EUREX:FBTP1!",
"d": "Euro BTP"
},
{
"s": "EUREX:FGBM1!",
"d": "Euro BOBL"
}
],
"originalTitle": "Bonds"
},
{
"title": "Forex",
"symbols": [
{
"s": "FX:EURUSD",
"d": "EUR to USD"
},
{
"s": "FX:GBPUSD",
"d": "GBP to USD"
},
{
"s": "FX:USDJPY",
"d": "USD to JPY"
},
{
"s": "FX:USDCHF",
"d": "USD to CHF"
},
{
"s": "FX:AUDUSD",
"d": "AUD to USD"
},
{
"s": "FX:USDCAD",
"d": "USD to CAD"
}
],
"originalTitle": "Forex"
}
]
}
</script>
</div>
<!-- TradingView Widget END -->

Thanks

Pedro

[BSS-Commerce]

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 !

[pmrmatos]

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