Docs

[Alejandro Jose S]

Hello,

I have set up some negative margin on a row. unfortunately, it only works if i add it on the cornerstone panel or add it once as a css custom class adding !important to it but doesn’t work at all through media queries so i must be doing something wrong.

I want to achieve this: http://prntscr.com/cd7phi and to do so i need to add different media query rules otherwise it will look different on mobile or tablets. what i’m trying to do is to make the row the button is in, overlap the slider.

/*button on negative margin */
.negative-margin-btn{
 z-index:10000 !important;    <---works
 margin-top: -20% !important; <---works
}
@media(max-width 480px){
  .negative-margin-btn{
    margin-top:-60% !important; <---do not work
  }
}
@media(max-width 767px){
  .negative-margin-btn{
    margin-top:-50% !important; <---do not work
  }
}
@media(max-width 979px){
  .negative-margin-btn{
    margin-top:-40% !important; <---do not work
  }
}
@media(max-width 1199px){
  .negative-margin-btn{
    margin-top:-35% !important; <---do not work
  }
}
@media (min-width 1200x){
   .x-container .negative-margin-btn{
    margin-top:-30% !important;  <---do not work
  }
}

if i remove the initial “non in a media query” rule, the margin-top rule doesn’t ever apply to the row 🙁

[Paul R]

Hi,

Can you provide us your site url so we can take a closer look.

For the mean time, you can try changing your code to this.

/* button on negative margin */
.negative-margin-btn{
 z-index:10000 !important;   
 margin-top: -20% !important; 
}

@media (min-width 1200x){
   body .x-container .negative-margin-btn{
    margin-top:-30% !important; 
  }
}

@media(max-width 1199px){
  body .negative-margin-btn{
    margin-top:-35% !important; 
  }
}

@media(max-width 979px){
  body .negative-margin-btn{
    margin-top:-40% !important; 
  }
}

@media(max-width 767px){
  body .negative-margin-btn{
    margin-top:-50% !important;
  }
}

@media(max-width 480px){
  body .negative-margin-btn{
    margin-top:-60% !important; 
  }
}

Hope that helps.

[Alejandro Jose S]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

/* button on negative margin */
.negative-margin-btn .x-btn{
 z-index:10000 !important;   
 margin-top: -20% !important; 
}

@media (min-width 1200x){
   body .x-container .negative-margin-btn .x-btn{
    margin-top:-30% !important; 
  }
}

@media(max-width 1199px){
  body .negative-margin-btn .x-btn{
    margin-top:-35% !important; 
  }
}

@media(max-width 979px){
  body .negative-margin-btn .x-btn{
    margin-top:-40% !important; 
  }
}

@media(max-width 767px){
  body .negative-margin-btn .x-btn{
    margin-top:-50% !important;
  }
}

@media(max-width 480px){
  body .negative-margin-btn .x-btn{
    margin-top:-60% !important; 
  }
}

Change the margins to adjust position.

Thanks

[Alejandro Jose S]

Ok i’ll try that. I was also trying to add the button with an absolute position instead because it’s a bit easier to customize, but i now encounter 1 small issue

I want to center it but, unfortunately, i can only do that if i specify the width of the button first. I wanted to know if it was possible to do that by using the button size cornerstone provides instead of adding a custom one.

[Paul R]

Hi,

To center your button, you can add text-align:center; in the style field of the column where your button resides.

Thanks

[Alejandro Jose S]

The actual problem of the css media query rules was the builder (cornerstone), for some reason the rules didn’t apply there but if i saved and tested the “live” page, it would work normally. I suppose this could be some kind of bug, (maybe?) I also tested it on another 3 pages with the latest cornerstone version (1.6.1) and the rules didn’t apply to the live view. They do show on the previous versions, though.

[Rad]

Hi there,

Latest cornerstone is just 1.3.1. And you’ll have to switch to different preview by clicking mobile icon beside the save button. The @media query works on different screen width, hence, the cornerstone device preview should work. Unless there is a problem on your end. Would you mind providing a video recording go of your issue? Maybe my understanding about it is different.

Thanks!

[Author]

Posts