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

[Paul]

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?

---

Grace and Peace,
Paul

[Paul]

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.

---

Grace and Peace,
Paul

[Simon]

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-320x120.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

[Paul]

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.

---

Grace and Peace,
Paul

[Paul]

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?

---

Grace and Peace,
Paul

[Paul]

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.

---

Grace and Peace,
Paul

[AnitaC]

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.

---

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

[Author]

Posts