Help with header css for mobile

[Jason Turner]

I have a button on my header that works fine on desktop but has an overlap when on mobile. I’ve tried to update css on elementor but still not lowering. I added these below but will not lower even when i change margin-top px higher. I did a test and added a color border and it worked. How would i get it to lower or let me know if you need more information.
Thank you
@media (max-width: 768px) {
.buttonClass {
margin-top: 50px !important; /* Adjust as needed */
}
}

@media (max-width: 480px) {
.buttonClass {
margin-top: 100px !important; /* Adjust as needed */
}
}

[Sonl Sinha]

Hi,

Kindly show us your website URL?

Regards,
Chris

[Jason Turner]

thank you, mosquitoesgone.com the “become a franchise” button on the header is over lapping on mobile and tablet views. I tried to add css to get it lowered but when i even changed the px it never moves. I did try a differnet css that put a border around the button and it worked fine. I deleted that test. So i’m not sure why the other isn’t working. I also have the image on the front page that seems over lapping words. I haven’t adjusted that currently but if you can let me know the css for that I can go in and change that as well.
Thank you for your help

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media (max-width: 767px) {
  .buttonClass {
    margin-top: 10px !important;
    display: table;
  }
}

Regards,
Chris

[Author]

Posts