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

[Jason Turner]

Thank you very much one other issue i see. the image thats in the middle of the screen of 2 guys, is over lapping the words above and i can’t seem to figure the css to make this either smaller or float blow the wording above. If you could please let me know this css. Thank you again!

[Sonl Sinha]

Hi,

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

@media screen and (min-width:768px) and (max-width:1023px) {
.elementor-645 .elementor-element.elementor-element-9025d00 > .elementor-widget-container { margin:0 !important;}
}

Regards,
Chris

[Jason Turner]

Thank you, i tried but it didn’t change the views. I’m not sure i supposed to adjust anything, but the css above didn’t change

[Sonl Sinha]

Hi,

Kindly send us your URL of the site and WordPress admin details (Username & Password) via email:[email protected] Please mention this forum URL while replying so that we understand what needs to be done.

We’ll check and revert back to you.

Regards,
Chris

[Jason Turner]

Thanks Chris but it seems a little weird to give out login and password? I’m not sure i’ve been asked this before. If this is normal just let me know. Just a little nervous on that

[Sonl Sinha]

Hi,

Kindly use this CSS code.

@media screen and (min-width:768px) and (max-width:1023px) {
.elementor-645 .elementor-element.elementor-element-9025d00 .elementor-widget-container { margin:0 !important;}
}

Regards,
Chris

[Jason Turner]

Thank you, I tried but it the image still over laps on mobile and tablet. i sent an email with login info

[Sonl Sinha]

Hi,

You didn’t gave us full access of the site, we are unable to edit (Editor and pages). Kindly give us full access so that we can resolve this issue asap.

If you don’t feel comfortable giving full access, then kindly use this CSS code instead of the previous one.

@media screen and (min-width:768px) and (max-width:1024px) {
.elementor-645 .elementor-element.elementor-element-9025d00 .elementor-widget-container { margin:0 !important;}
}

Regards,
Chris

[Jason Turner]

Try it now. I changed it to admin for role? i think thats what was needed. Let me know if not

[Sonl Sinha]

Hi,

Image overlapping issues have been resolved. Kindly clear the cache and check it.

Regards,
Chris

[Jason Turner]

Thank You very much!

[Author]

Posts