June 13, 2013 at 4:52 pm #45770
I am having some issues with the layout of the design on mobile devises for the site http://zigbuilders.com it cuts off the images/sections of the layout half way across the screen. I am using the outreach theme.
Wondering if anyone can help solve the issue. I know it is in the CSS but not sure what to change to get the site to look right.
All The help is appreciated!June 13, 2013 at 5:19 pm #45773
It’s not responding because you have this large image as a background:
background: url("images/bot-bar3.png") no-repeat scroll center center #000000;
You need to set some sort of width in there for mobile or set it so it doesn’t show up at all (display: none;)June 13, 2013 at 5:31 pm #45776
Is There anyway to just have the whole site show up as it does on the computer? and the user would just zoom in? so not have it change locations for mobile responsiveness as it does in the outreach demo?June 13, 2013 at 5:34 pm #45778
I was told a while back – if you remove all of the Media Query information from the style.css – that should force it to behave that way, but all themes are different. I would suggest just copying the style.css sheet to have a backup if you do that.June 13, 2013 at 7:34 pm #45799
I tried deleting all the responsive design section in the css and it correct some issues however the slider, bottom section and footer do not show the right dimensions still cuts off the images and the header widget area does not show.
Do you know of any other sections that might be causing this? is there something in the functions.php file?June 13, 2013 at 8:03 pm #45805
It’s doing that because that image is 2,050px × 430px. It’s too wide.June 13, 2013 at 8:23 pm #45810
I just tried to bring it down to 900 wide which is smaller then the nav bar and it still does the same thing along with the slider and footer.
The nav bar on the other hand does not it show the full image correctlyJune 13, 2013 at 8:56 pm #45813
I think I fixed part of it I had to remove the veiwport mobile stuff in the functions.php as well.June 14, 2013 at 7:24 am #45874
Ok removing the viewport made the screen bigger but still did not completely remove the white space on the right side. I have reverted back to the main css file for outreach and only removed the responsive code and the viewport in the functions.php and I am still have an issue with the content /images cutting off
Do you know of anything else that might be affecting this theme?June 14, 2013 at 7:45 am #45879
Did you reduce the size of that image. The image is not responsive, so therefore you need to add that element to the media queries to make it responsive or tell the viewport to disregard that background image on mobile devices.June 14, 2013 at 11:13 am #45933
yeah I tried that I actually went back to the original css file (to try and see the problem )so I don’t have that image on the site if you go back to it, it just has the basic outreach design and it still shows the white right side cut off on mobile devices including tablets . It has to be something with the theme that is still causing this issue, but have no idea whatJune 14, 2013 at 11:26 am #45938
The #inner .wrap is only 1060px wide. Your image is 1150 x 550. http://zigbuilders.com/wp-content/uploads/2013/06/image1-1150×550.png. Your slider and image is larger than the .wrap that it’s sitting in.June 14, 2013 at 11:41 am #45941
I did not have an inner wrap in the css, but I added one with a width of 1150 and all it does is make the image area bigger but on the mobile it still cuts everything off on the right side of on the website, not just the slider the whole site is cut off with a white space.June 14, 2013 at 12:04 pm #45942
Ok I figured it out the min-width I moved to the body section then expanded it to 1200px and it works on mobile now!
Thank you so much for your help! I really appreciate it.June 14, 2013 at 12:47 pm #45951
Great, I will close this now.
The topic ‘Mobile Outreach Design Issues’ is closed to new replies.