Header CSS not performing on Column Item Muffin Builder

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

Comments

  • Hello Shane,
    could you please provide us with some screenshots so we can understand better?
    thanks
  • edited 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)


  • 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.
Sign In or Register to comment.