Bigger margin Baseline Theme

[carolinebsn]

Hello,

I've been trying to add margins to the Baseline theme, I've tried a few solutions but nothing good so far.

This is the code I have now added to the theme.liquid, the problem i have is that coloured backgrounds are now cropped. I would like the colours to be full width, but the content to have more space on both sides.

<style>
@media (min-width: 990px) {
body {
margin: 0 auto !important;
max-width: 95% !important;
}
}
</style>

Thanks in advance for your help,

Caroline

[EBOOST]

Hi @carolinebsn,

Could you share your url store? I will help to take a look this issue.

[carolinebsn]

Thank you, it's here: https://54ff8c-27.myshopify.com/

[EBOOST · Accepted solution]

Hi @carolinebsn ,

May I suggest code below:

<style>
@media (min-width: 990px) {
	section,
	.bg-gridline-color{
		background: #fff!important;
	}
	.shopify-section > * > * {
		max-width: 95%;
		margin: 0 auto;
	}
	.shopify-section[id*="_text_columns_with_images_"] > * > *,
	.shopify-section[id*="_image_with_text_"] > * > * {
		max-width: none;
	}
	.shopify-section[id*="_text_columns_with_images_"] > * > *{
		padding-left: calc(2.5vw + 1rem);
		padding-right: calc(2.5vw + 1rem);
	}
	.shopify-section[id*="_image_with_text_"] > * >  div {
		padding-left: calc(2.5vw + 1rem);
		
	}
	.shopify-section[id*="_image_with_text_"] > * >  div + div {
		padding-right: calc(2.5vw + 1rem);
	}
	.shopify-section[id*="_image_with_text_"] > * >  div:not(.lg\:col-span-6) {
		padding-right: calc(2.5vw + 1rem);
		
	}
	.shopify-section[id*="_image_with_text_"] > * >  div:not(.lg\:col-span-6) + div {
		padding-left: calc(2.5vw + 1rem);
	}

}
</style>
{%  if page.handle == 'contact' %}
<style>
	@media (min-width: 990px) {
		#MainContent #shopify-section-template--22785476100435__main.shopify-section > * {
			max-width: 95%;
			margin: 0 auto;
		}
		#MainContent .shopify-section > * > * {
			max-width: none;
			margin: 0;
		}

	}
</style>
{%  endif %} 

[carolinebsn]

Thanks a lot! It seems to work well 🙂

[carolinebsn]

Hello, actually it seems that this code is conflicting with the colour schemes i have. So if the background is blue in the chosen colour scheme, it stays white in some sections such as Spacer, Feature text.
I've removed the first line of the code forcing for the white background for the moment

[websensepro]

Hello @carolinebsn ,

Can you please share your store URL?

Thanks!