Mobile Outreach Design Issues

Community Forums Forums Design Tips and Tricks Mobile Outreach Design Issues

This topic is: resolved

Tagged: ,

This topic contains 14 replies, has 2 voices, and was last updated by  anitac 10 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #45770

    blizzard01
    Participant
    Post count: 8

    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!

    #45773

    anitac
    Participant
    Post count: 6383

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #45776

    blizzard01
    Participant
    Post count: 8

    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?

    #45778

    anitac
    Participant
    Post count: 6383

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #45799

    blizzard01
    Participant
    Post count: 8

    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?

    #45805

    anitac
    Participant
    Post count: 6383

    It’s doing that because that image is 2,050px × 430px. It’s too wide.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #45810

    blizzard01
    Participant
    Post count: 8

    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

    #45813

    blizzard01
    Participant
    Post count: 8

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

    #45874

    blizzard01
    Participant
    Post count: 8

    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?

    #45879

    anitac
    Participant
    Post count: 6383

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #45933

    blizzard01
    Participant
    Post count: 8

    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

    #45938

    anitac
    Participant
    Post count: 6383

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #45941

    blizzard01
    Participant
    Post count: 8

    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.

    #45942

    blizzard01
    Participant
    Post count: 8

    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.

    #45951

    anitac
    Participant
    Post count: 6383

    Great, I will close this now.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Mobile Outreach Design Issues’ is closed to new replies.