- This topic has 14 replies, 2 voices, and was last updated 4 years, 11 months ago by
.
Hi team,
I’m having several issues with the mobile version of my site. I checked for prior posts that addressed this and couldn’t find any.
- There is a weird grey bar above and below the hero image – I want that out so that the hero image / slider revolution is full bleed on mobile.
- The action button on the hero slider is misaligned, and the hero slider text is TINY. How do I make it responsive on mobile where the side increases and the alignment stays true?
- My contact form below is powered by WPForms and for some reason some of the placeholder texts is hidden. Why is this?
Thanks.
Adding one more issue:
4. My header logo title disappears when I scroll on mobile. How do i set it so that the title logo isn’t disappearing
Hi @dalkat,
Thank you for your questions.
Could you please share me your site URL where it’s happening so that I can troubleshoot it?
Best regards,
Shufflehound teamloganyonavjak.com
Thanks!
I just changed it so the background of that container is white instead of grey but you’ll see that there’s still an issue with the gap for issue #1.
Issue #1 still exists.
Issue #2 has been resolved with mobile view for slider revolution.
Issue #3 and #4 still exist.
New issue #5: now the “name” and “email” fields are invisible on mobile. why is this?
There is a weird grey bar above and below the hero image – I want that out so that the hero image / slider revolution is full bleed on mobile.
I visited your shared site on mobile and it is displaying fine for me as shown in the attached screenshot.
Which browser are you using to test it?
Please it using a different browser.
My header logo title disappears when I scroll on mobile. How do i set it so that the title logo isn’t disappearing
To achieve this, please enable the sticky mobile header in the theme Header settings as shown in the second & third attached screenshots.
My contact form below is powered by WPForms and for some reason some of the placeholder texts is hidden. Why is this?
New issue #5: now the “name” and “email” fields are invisible on mobile. why is this?
Please see in the attached screenshot how it is displaying fine for me.
I am using an iphone SE, using the native browser. I tested it on other phones and it was fine but there were bugs on mine (issue #1, issue #3/5)
For issue #4, I don’t want a sticky header, but the header automatically goes white until I scroll it off the page.
See video for issue #4 – i don’t want a sticky header, I just don’t want the name to disappear when I scroll and the white bar shows up
Regarding issue #4, here is my code for desktop view, which enables the logo to be white when the scroll is at the top, and then blue when I scroll down.
#header-logo-title .header-logo-title-alignment {
font-family: “Yellowtail”;
font-size:30px;
}header.primary-desktop.primary-desktop-light .sh-header.sh-sticky-header-active #header-logo-title div { color: #5a9fb6;}
Similarly, I want the same effect for mobile. I found that when I add this code, it changes the color of the mobile title logo for both scroll at the top and when the bar appears when I scroll down.
.primary-mobile-light #header-logo-title {
color:#5a9fb6!important;
}However, I only want it to turn blue when I scroll, I want it white when it’s at the top of the page, just like desktop. Do you see what I mean?
See video for issue #4 – i don’t want a sticky header, I just don’t want the name to disappear when I scroll and the white bar shows up
You can remove that white bar on mobile by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
body #page-container header.primary-mobile-light .sh-header-mobile.sh-sticky-mobile-header-active { background: transparent !important; border: 0 !important; }To help us keep support thread separates could you please create a new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you with your new thread.
Could you please resolve the other issues here as we’ve already started and are almost at resolution? I already have 6 threads going and this one we’ve already begun resolving.
Regarding the code you shared (copied below) – this didn’t fully resolve the issue. I don’t want a transparent container. I want to:
- Change the color of the title logo when the page scrolls, not the color of the container background when the page scrolls. Do you have any other ideas?
- Remove the gap bar that appears when I view it on my phone (which still appears – iphone SE) – it’s white now because i changed the container color of slider revolution to white on wp bakery, but it’s still showing a gap and i want the hero image to fill the full screen on iphone SE.
Thank you for your time
body #page-container header.primary-mobile-light .sh-header-mobile.sh-sticky-mobile-header-active { background: transparent !important; border: 0 !important; }Edit: For the first point above, I tried this code and it worked for what I was trying to accomplish. I still need help with the second one and the rest of the issues I raised prior.
body #page-container header.primary-mobile-light .sh-header-mobile.sh-sticky-mobile-header-active #header-logo-title { color: #5a9fb6!important; }I am not getting any clue what we are doing here as there are too many questions here so I kindly request you to create separate topics for them and provide all necessary information in the created topic.
please close 🙂
ok
