Responsive Help WordPress
Hello!
I'm new to working with responsive design - and I thought all was working well. On two laptops, an iPad and an iPhone, the site displays well. But my client keeps complaining (and adobe browser labs confirms she is correct) that the content overtop of the tan box on the homepage loads cut off.
http://www.counselinginchapelhill.com/
Can someone help? I'm open to any solution. Please let me know if this question should be paying more.
Thanks!
Answers (5)
Michael Caputo answers:
Just had a quick look at your markup.
A lot of the elements on your page are positioned absolutely using percentages. IMO it's going to take a lot of work to make this work properly on all screen sizes & Devices.
I know you already have your site built etc, but I suggest looking into a framework like Foundation, or Bootstrap for responsive sites.
ohlivia13 comments:
Hi Michael-
I was working off a responsive theme in the hope's of being able to just edit it. Seems like I've made more work for myself :)
Is there anyway we can remove the percentages from that banner part? It's working fine on mobile devices, and, like I said, on 2 laptops. I'm not sure why it's loading so oddly on a normal browser -- that's really the thing that needs fixing, as far as I can tell.
But thank you for your information!
Arnav Joy answers:
i am not sure if it will work or not but try
go to line 217 and replace the css with following
#homeBanner h2 {
color: #FFFFFF;
display: block;
font-family: 'Old Standard TT',serif;
font-size: 24px !important;
margin: -20% 2% 0 32%;
padding: 0;
position: relative;
text-align: left;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
text-transform: none;
}
and in line 232 replace
#homeBanner p {
color: #333333;
display: block;
font-family: 'Old Standard TT',serif;
font-size: 15px !important;
margin-left: 27%;
margin-right: 10%;
margin-top: 1%;
position: relative;
text-align: left;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
ohlivia13 comments:
That works when the browser is closed to a very odd size. Otherwise, it floats at the top.
Bryan Headrick answers:
The margins for your text in the beige box are too restrictive because they're relative to the entire width of the screen rather than to the container the text is in (the beige box). Make the box its own container, position the box accordingly, and then you can properly position the text within that box and more wisely use the space within the box.
(edit) I took another look at the css - you're using a bg image for that whole block - bad idea. The photo should be a separate block from the beige box, and I would use a bg color rather than an image for that. Also, at a certain point, you should probably reduce the font size a bit.
Does that make sense, or do you need more details?
ohlivia13 comments:
More details would be great! As much detail as you can stand to give... I'm learning everyday.
Thank you!
Jatin Soni answers:
You have used photograph and yellow box as a background and that is causing this problem. Instead you should use as an element actual HTML div and img tag which will auto stretch according to content height ( when you won't define height) and will pull down below element as well.
Zlatko Zlatev answers:
Alright, if i got you right the problem you have is with the background image of the top box with the left sided picture.
Let's start with optimizing the background image. I've cropped it down to 1000px in width. That's the largest you site gets. Rest is taking advantage of css3 background-size:
#homeBanner {
background-image: url( http://zzlatev.com/files/home-19.png ) !important;
background-repeat: no-repeat !important;
}
@media (max-width: 1024px) {
#homeBanner {
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
}
Hope that helps.