Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 13, 2018 at 11:24 pm #1009709
    bbarta28

    Hello!

    I just went live with a new website and am noticing that most of the buttons on mobile are being overlapped by an image. There are also some headings that aren’t appearing properly with some awkward overlap. Please see screenshot examples here.

    Any insight? I am unsure why this is happening. Many thanks!!

    Brianne

    September 13, 2018 at 11:35 pm #1009712
    Jordan Shannon

    Hey bbarta28,

    Are you running any custom css on your site? I’m sure this may be a culprit. Also, please add the specific pages that are having issues.

    Best regards,
    Jordan Shannon

    September 14, 2018 at 12:14 am #1009733
    bbarta28

    Hi Jordan,

    Thank you for the quick response! Yes, I have some custom css. Is there a way to pinpoint what code might be funky?

    There are several pages with mobile issues:

    1. Homepage – https://wonderlandbridal.com/
    – The Shop Stella and Shop Sincerity buttons are all overlapped by images
    – The Read More link toward the first blog post at the bottom is not visible (probably overlapped by the image below it)

    2. Wedding Dresses – https://wonderlandbridal.com/wedding-dresses/
    The buttons are overlapped by the logo images

    3. Bridal Collection Pages https://wonderlandbridal.com/wedding-dresses/stellayork/ https://wonderlandbridal.com/plus-size/ https://wonderlandbridal.com/wedding-dresses/sincerity/

    The Request Appointment button at the top is overlapped by the first image

    4. Bridesmaids https://wonderlandbridal.com/bridesmaids/
    Two buttons at the bottom are overlapping each other,
    Also, the headline “Bring Style to Your Bridal Party” is overlapping the image

    5. Accessories – https://wonderlandbridal.com/accessories/
    The Badge images at the bottom are on top of each other and the separators are not appearing correctly

    6. Appointment – https://wonderlandbridal.com/contact/
    The VIP Bridal Experience headline is overlapping the map

    Basically, lots and lots of overlap going on :( I’d be incredibly thankful for any insight to get this fixed! Thank you SO much

    September 14, 2018 at 8:27 pm #1009935
    bbarta28

    I’ve been going through and playing with the CSS hoping to find what is causing the issue but nothing seems to be working :( hopefully it’s just one change that will fix the entire site. Do you think it is a margin issue? I’m desperate — thank you!

    September 15, 2018 at 6:52 am #1009979
    Rikard

    Hi,

    Thanks for the update and screenshots. I couldn’t locate the elements in your screenshots on your actual site though, could you link directly to where they are occurring please?

    Best regards,
    Rikard

    September 15, 2018 at 4:26 pm #1010172
    bbarta28

    Hi Rikard,

    Thanks so much for circling back with me on this! I have the links and further details on reply #1009733 but the issues are ONLY occurring on mobile. Were you looking on mobile or desktop when you were unable to see them? I’m very willing to provide you admin access to take a further look. I’m so hopeful to get this fixed!

    Thank you again!
    Brianne

    September 15, 2018 at 11:08 pm #1010272
    Mike

    Hi,
    I took a look at your site and I found this css to be causing the issue:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .flex_column {
margin-bottom: -30px; 
}
}

    please look in your custom css and remove this rule, note that it may be mixed in with some other rule. If you can’t find it please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    September 15, 2018 at 11:23 pm #1010273
    bbarta28

    Hi Mike,

    Thank you so much for checking in. I removed that from my custom CSS but it did not seem to fix the issue yet. In fact, it appears that it uncentered my logo on mobile. The end result I’d like to achieve is a centered logo in the header on mobile and then removing all the weird overlap that I shared in the screenshots. I’ll add login credentials in the private section per your suggestion as this one has me totally stumped! Thanks in advance! I really appreciate your help!!

    September 16, 2018 at 10:22 am #1010336
    Mike

    Hi,
    I didn’t find the custom css in your site, so I assume you had removed it, once I flushed your GoDaddy cache the overlaps on the homepage were corrected and your mobile logo returned to center.
    Please clear your browser cache and check, I assume the other pages will be corrected also.

    Best regards,
    Mike

    September 16, 2018 at 4:37 pm #1010447
    bbarta28

    Mike, thank you so much! You saved the day again. I am thrilled! I have one more issue that is somewhat related (a mobile issue) but I will open up a separate thread.

    THANK YOU! You may close the ticket.

    September 16, 2018 at 4:46 pm #1010449
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Buttons Not Appearing Properly on Mobile’ is closed to new replies.