- This topic has 16 replies, 2 voices, and was last updated 6 years, 9 months ago by
.
Hi Support,
This is probably an easy question, but how do I reduce the left and right margin? or reduce the white space between the left and right side.
I tried using Yellow Pencil but moving Left margin past -200, doesn’t let me extend the right side.
Also for widget… I’m using a Tradingview widget which utilizes something like this. If I use autosize with 100% width/height, the widget shrinks down in size ( I presume for the responsiveness). Anyway to extend that as well (see widget picture). That’s currently at 100%, if it was set to 400 for instance, it would extend to the right and look fine on the website, but on mobile it breaks the responsiveness.
<!– TradingView Widget BEGIN –>
<div class=”tradingview-widget-container”>
<div class=”tradingview-widget-container__widget”></div>
<div class=”tradingview-widget-copyright”><span class=”blue-text”>Market Data</span> by TradingView</div>
<script type=”text/javascript” src=”https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js” async>
{
“showChart”: true,
“locale”: “en”,
“largeChartUrl”: “”,
“width”: “400”,
“height”: “660”,
“plotLineColorGrowing”: “rgba(33, 150, 243, 1)”,
“plotLineColorFalling”: “rgba(33, 150, 243, 1)”,
“gridLineColor”: “rgba(233, 233, 234, 1)”,
“scaleFontColor”: “rgba(131, 136, 141, 1)”,
“belowLineFillColorGrowing”: “rgba(5, 122, 205, 0.12)”,
“belowLineFillColorFalling”: “rgba(5, 122, 205, 0.12)”,
“symbolActiveColor”: “rgba(225, 239, 249, 1)”,
“tabs”: [
{
“title”: “Indices”,
“symbols”: [
{
“s”: “INDEX:SPX”,
“d”: “S&P 500”
},
{
“s”: “INDEX:DOWI”,
“d”: “Dow 30”
},
{
“s”: “RUSSELL:RUT”,
“d”: “Russell”
}
],
“originalTitle”: “Indices”
},
{
“title”: “Commodities”,
“symbols”: [
{
“s”: “CME_MINI:ES1!”,
“d”: “E-Mini S&P”
},
{
“s”: “CME:E61!”,
“d”: “Euro”
},
{
“s”: “COMEX:GC1!”,
“d”: “Gold”
},
{
“s”: “NYMEX:CL1!”,
“d”: “Crude Oil”
},
{
“s”: “NYMEX:NG1!”,
“d”: “Natural Gas”
},
{
“s”: “CBOT:ZC1!”,
“d”: “Corn”
}
],
“originalTitle”: “Commodities”
},
{
“title”: “Bonds”,
“symbols”: [
{
“s”: “CME:GE1!”,
“d”: “Eurodollar”
},
{
“s”: “CBOT:ZB1!”,
“d”: “T-Bond”
},
{
“s”: “CBOT:UD1!”,
“d”: “Ultra T-Bond”
},
{
“s”: “EUREX:GG1!”,
“d”: “Euro Bund”
},
{
“s”: “EUREX:II1!”,
“d”: “Euro BTP”
},
{
“s”: “EUREX:HR1!”,
“d”: “Euro BOBL”
}
],
“originalTitle”: “Bonds”
},
{
“title”: “Forex”,
“symbols”: [
{
“s”: “AMEX:XLK”,
“d”: “Technology”
},
{
“s”: “AMEX:XLU”,
“d”: “Utilities”
},
{
“s”: “AMEX:XLV”,
“d”: “Healthcare”
},
{
“s”: “AMEX:XLB”,
“d”: “Materials”
},
{
“s”: “AMEX:XLI”,
“d”: “Industrial”
},
{
“s”: “AMEX:XLP”,
“d”: “Consumer Staples”
},
{
“s”: “AMEX:XLE”,
“d”: “Energy”
},
{
“s”: “AMEX:XLF”,
“d”: “Financials”
}
],
“originalTitle”: “Forex”
}
]
}
</script>
</div>
<!– TradingView Widget END –>Any help would be appreciated!
Hi @Tongalong,
I hope you are well today and thank you for your question.
Could you please share me the page URL from your site where it is displaying so that I can help you?
Please ignore the attached screenshot.
Best regards,
Shufflehound teamI’m not sure which site you are logging into, but that looks to be outdated. The Dev/Prod environments are both on 7.2
I have already said you above that “Please ignore the attached screenshot”.
Also as requested above could you please share me the page URL from your site where it is displaying so that I can help you?
I don’t have the widget currently added, but i put it as a private comment.
I visited your shared site but didn’t see anything on it like your shared screenshot.
Please advise.
Apologies. I’ll try to reproduce that later tonight when i get home.
If you look at it now, it should have the appropriate homepage.
Still, I don’t see it on your shared site.
Please refer the attached screenshot to know what I see on your site.
I’m really an idiot and shared the wrong site. Please see new one.
You can reduce that margin by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.blog-list article .post-container { margin: 0 5px; }That didn’t seem to make any difference from what I can tell.
I can see the margins are reduced on your shared site as shown in the attached screenshots.
Please test it clearing your browser cache.
So I’m not looking for the margin between posts. It’s more the outside margins (far left and far right of the entire page)
Solution for this topic
You can reduce the outside margins by using below custom CSS code instead of above shared CSS code.
#page-container .container { max-width: 97% !important; width: 1400px !important; }That works great, thank you!
You are most welcome here 🙂
