Responsiveness: Loosing some content on right when resizing

[sundara]

Hello,

The website http://sarahpowers.com/iyi/ was developed with the Agency theme.

For some reason, when I resize below 100%, the main content gets slightly cut off on the right (easily seen on this page: http://sarahpowers.com/iyi/coursework-overview/). I have tried to detect the culprit in the CSS, but was unable to do so. Does anybody have any advice?

Likewise, it would be nice if the headline (Coursework Overview) stayed with the content, in that there gets some padding added on the left when the site is resized below 100% (right now it stays glued to left browser window without padding).

Any input would be greatly appreciate.d

Thank you,
Conny

http://sarahpowers.com/iyi/

[AnitaC]

Check down in the media query size for this:

.entry-content p {

See if you have a right margin in there.

If not, at that code with a right margin. I tried it with Firebug, but cannot be for sure if it works until you place the code.

---

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

[sundara]

Hi Anitac,

Thanks for your response and suggestion.

I added margin to the right of ".entry-content p" and, while it works for the #content paragraph application, it does not seem to be the "real problem". If you go to the Home page and reduce below 100% or the Calendar page, the problem persists with the elements there. Somehow there must be wrong settings at a higher css level.

I don't quite understand why, at some point, the body copy on the left stops moving and the browser bar starts cutting into the copy on the right.

Do you have further thoughts?

Thank you
Conny

[AnitaC]

I see now. What size are you reducing it down to. I see in the lower media queries this is missing:

	.home-left,
	.home-middle,
	.home-right,

Look at the 1020 media queries and you'll see it there. Then look at the smaller size below it. You can add it or make adjustments in 1020. Keep in mind, you may have to pull that code out separate to customize it was changing 100% at that level could change other areas.

---

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

[sundara]

In the 1020 media query, I have

.home-left,
.home-middle,
.home-right,`

set to 100% width and 0 margin (that was the default in the Agency theme). At that exact browser size, when the three columns collapse underneath each other, they have padding on the left yet get cut off at right. That should not be the case, I still feel that the issue must be with a higher level wrapping tag somewhere.

[AnitaC]

I would then recheck your edits. You have created a custom design of your own. I cannot offer any further assistance so I will unsubscribe from here.

---

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

[sundara]

OK, thank you Anitac.

[Author]

Posts