Mobile Outreach Design Issues

[blizzard01]

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!

[AnitaC]

It's not responding because you have this large image as a background:

#home-sections {
    background: url("images/bot-bar3.png") no-repeat scroll center center #000000;
    height: 430px;
    overflow: hidden;
    padding-top: 20px;
}

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;)

---

Need help with customization or troubleshooting? Reach out to me.

[blizzard01]

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?

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[blizzard01]

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?

[AnitaC]

It's doing that because that image is 2,050px ?— 430px. It's too wide.

---

Need help with customization or troubleshooting? Reach out to me.

[blizzard01]

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 correctly

[blizzard01]

I think I fixed part of it I had to remove the veiwport mobile stuff in the functions.php as well.

[blizzard01]

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?

[AnitaC]

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.

---

Need help with customization or troubleshooting? Reach out to me.

[blizzard01]

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 what

[AnitaC]

The #inner .wrap is only 1060px wide. Your image is 1150 x 550. http://zigbuilders.com/wp-content/uploads/2013/06/image1-1150x550.png. Your slider and image is larger than the .wrap that it's sitting in.

---

Need help with customization or troubleshooting? Reach out to me.

[blizzard01]

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.

[blizzard01]

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!

body {
background-color: #eee;
min-width: 1200px;

}

Thank you so much for your help!  I really appreciate it.

[AnitaC]

Great, I will close this now.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts