Trying to figure out how to clean up mobile view – Outreach

Community Forums Forums General Discussion Trying to figure out how to clean up mobile view – Outreach

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  Anita 1 year, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #32527

    Paul
    Participant
    Post count: 56

    http://crossroadsefca.com/

    They love the ‘regular” view on desktops on and laptops, but we are trying to clean up the responsive/mobile view. It seems that it does not resize as it should.

    I know I made a ton of adjustments and tweaks to get the look they wanted (many thanks to several of you for your help!), so I am guessing that some of those tweaks affected the responsiveness of the theme.

    I am horrible at trying to figure out responsive styles, so does anyone have any suggestions on how I can clean up the mobile view, without messing up the ‘non-mobile’ view?

    #33400

    Paul
    Participant
    Post count: 56

    I am still in need of help in cleaning this site up for mobile display, if anyone could offer any tips. I am kind of lost on it.

    #33403

    Simon
    Participant
    Post count: 7

    Something I had a lot of trouble with was the header image, but I figured it out looking at how some others had done it.  I think you’ll need it to be a much narrower than it is currently if you want it to be responsive.

    http://leafonthewindphoto.com

    Using the “My Custom CSS” plugin I added the following to my CSS (a lot of people suggested using the an app rather than modifying the CSS directly so the changes won’t get overwritten by a future theme update.)

     
    /************************************************
    * Genesis Outreach Theme style.css Header Fixes *
    ************************************************/
    #title-area {
    background: url(http://www.leafonthewindphoto.com/shinies/themes/outreach/images/LotWPhoto-Header-320×120.png) no-repeat !important;
    background-position: left !important;
    background-size: contain !important;
    }

    #title {
    margin: 0 !important;
    }

    #title a,
    #title a:hover {
    color: #FFFFFF !important;
    display: block !important;
    height: 120px !important;
    text-indent: -9999px !important;
    width: 320px !important;
    }
     

    Hope that helps.

    Simon

    #33420

    Paul
    Participant
    Post count: 56

    It looks like, when I put the site into the responsive tester – http://www.studiopress.com/responsive/ – that the header seems to resize ok; it seems that it may be the responsive slider that isn’t so responsive, and then in the 1024 view, the slider and the sidebar is all ‘smooshed’ together.

    #43394

    Paul
    Participant
    Post count: 56

    I am still struggling with this site. Apparently in iPad and iPhone the site does not look good at all. Since I don’t have access to either one of those, I’m not sure exactly how to approach the problem.

    Here is what the Pastor says, “The devices I’ve had problems with are my iPhone and my iPad. On both there is significant change. On the iPad, the large graphic overlaps the three smaller graphics. On the iPhone, the tool bar becomes two lines, the graphics loop does not cycle, and I can only see about 1/4 to 1/3 of the page.”

    Can anyone help me figure out how to fix this?

    #43409

    Paul
    Participant
    Post count: 56

    Thanks to suggestions from Jennifer, I have done the following:
    Changed
    ` .home-featured {
    width: 700px;
    }`

    to

    ` .home-featured {
    width: 100%;
    }`

    And I changed
    `.home .sidebar {
    width: 300px;
    }`

    to
    `.home .sidebar {
    width: 225px;
    }`

    That helped some apparently, but now the Pastor sent this, “On my iPad – there is no longer overlap, but the layout looks awkward – the graphics are in the extreme left and right of the screen with an unusually large space in between.

    On the iPhone – the loop is now working but that graphics are still incredibly large.”

    I am really anxious to get this fixed, if anyone can offer any further suggestions.

    #43412

    Anita
    Participant
    Post count: 7556

    Do you have a separate media query set up just for iPhone and iPad only? Or are you just tweaking a specific size in the media queries in hopes of fixing it? I found that making a specific one helps a lot and also use the Studiopress Responsive tester too – http://studiopress.com/responsive. If you need some additional assistance with getting the settings as close to the correct settings as possible, I can provide freelance service to help you.


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

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

You must be logged in to reply to this topic.