Header CSS not performing on Column Item Muffin Builder

Daltai · June 2018

Hi,

I would like to place a margin on the header column element of my website https://shanedalton.ie/

- If you view the website I have surrounded the text "WEB DESIGN DONEGAL, SLIGO & LEITRIM LOCAL BUSINESS WEBSITE SOLUTIONS" with a background of black with opacity of .4. I would like this background to have a margin which I was able to achieve using the muffin builder > add item > column > content > Custom | Styles box.

However I this CSS creates the same margin on a phone media device and the text looks terrible. I have tried numerous attempts to target the css for BOTH media query sizes outlined below and I have had no joy. This is the CSS I used:

margin: 20px 100px; on viewports above 769px and a margin: 0px for viewports under 769px.

I tried variations of the !important rule on both and still no joy. I tried adding the CSS to custom css in the muffin builder module and below the muffin builder itself in page edit mode. No joy.

Can someone please help me with this. If you need my WordPress logins that is no problem.

Many Thanks

Shane

Bryan · June 2018

Hello Shane,

could you please provide us with some screenshots so we can understand better?

thanks

Daltai · July 2018

Hi Bryan,

What I am aiming to achieve is very straightforward. Here is a screen shot with a badly drawn red rectangle showing what I am trying to do - https://snag.gy/quMTUQ.jpg

I want to give the div (surrounded partially with an opaque background) a margin on all sides

20px (top & bottom) and 100px (left and right)

Pablo · July 2018

Hi,

margin-left and margin-right makes no sense, because you do not "scale" or "cut" your div with margin tag. Even if you do it, you'll center it like it's on beginning of customizing.

You have to edit it in the Muffin Builder.

I made a CSS for you with this one collumn for margin top and bottom, is this effect ok?

@media (min-width:767px){
	#Content .mcb-column:nth-child(1) {
	 margin-top:50px;
	 margin-bottom:50px;
	}
}

Thanks.

Header CSS not performing on Column Item Muffin Builder

Comments

This website uses cookies