Shopify themes, liquid, logos, and UX
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
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
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.
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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
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 !
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025