Working on a WordPress website.
Everything looks fine on desktop but on mobile there is a significant amount of whitespace at the top and bottom of the header.
New to WordPress so I'm having a hard time figuring out what is going on.
Here's a link to the website: http://reluctant.ceo
I would like to note that when I change the size of my browser window this problem does not occur, only when I'm looking at it on my iPhone.
Also, when I turn of "responsive layout" in the theme options I still have this issue on my iPhone.
One more thing, not sure if it matters but the header is using Slider Revolution.
The issue was that I had my revolution slider inside of a VC row element. I needed to delete the row and simply replace it with just the revolution slider instead of placing the slider inside a row.
Related
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
I having issues that you can drag website to left and it seems like width is larger than viewport.
When website load it seems to work but then i can click left on mouse and drag it....and then you see whitespace that appear.
No idea where this is happening. Im using https://bootstrapmade.com/demo/themes/Avilon/ theme.
See images below:
Problem image where you can see whitespace
How it suppose to look
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
Below are two simple HTML pages. You will notice that the header of the pages move when one browse from one page to the next. I can not seem to figure out why the header does not remain on the same place...
http://staging.serviceportal.com.au/service05/virgintest/landingPage.html
http://staging.serviceportal.com.au/service05/virgintest/thankyoupage1.html
Below is a screenshot of what I mean. One can notice the 5/10 pixel shift around the header region in both the pages.
I will like to know from where that shift is happening and how to fix this. Just to inform that these pages are responsive and built using Twitter BootStrap
I'd say the header moves because you have a scrollbar on the second screen, so the width of the screen is smaller, and the site moves accordingly.