Agency Pro Featured Post Widget

[CaseyKt2013]

Hello,

I am using the Featured Post Widget with the Agency Pro Theme in the Home Middle section.

On smaller screens, there is a lot of white space between the images for the featured post widget. It looks fine on larger screens, but as soon as it gets down to approximately 480px - a white gap appears between the images.

Any suggestions on how to get rid of that?

Thank you!

http://gesignsnmore.com

[SavvyJackie]

Hi,
You'll need to edit the @media only screen and (max-width: 480px) section of your stylesheet.

Add the following:

.home-middle .entry-header {
	  display: none;
}
.agency-pro-home .content .featuredpost .entry {
         min-height: 0;
}

Also in the same section adjust the padding to:

.home-middle {
	padding: 15% 0 5%;
}

That should do it. Refresh your page to see changes.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[CaseyKt2013]

Thank you for taking the time to share this - very appreciated! Testing it out now. 🙂

[CaseyKt2013]

Great! That worked really well - except now there is a small white band at the very top (only) on the 320 and 240 screen sizes. Any suggestions on what would cause this?

Thank you!

[MoodyRiviera]

Just a comment here: I looked at your site with three web browsers (Macintosh Chrome, Macintosh Firefox, and Macintosh Safari) and in Chrome and Firefox everything looks OK, but in Safari I see the white gaps. Sorry I can't help with a solution, but just thought this might help with the troubleshooting.

*MoodyRiviera*

[SavvyJackie]

Thanks MoodyRiviera. Not sure what the issue is with that either.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[CaseyKt2013]

Thank you for the heads up on that - I'm working in Safari …

Do you see the gaps on more than just the smaller screen sizes? Is it just the one white band on top - or are you seeing more of them (between images).

Thanks again!

[SavvyJackie]

Here you go. The white blocks before and after widget title HOW CAN WE HELP is causing the issue - may just be to different font sizing in Safari.

Try adding this to your media queries at 480:

.agency-pro-home .content .featured-content .widget-title::after,
.agency-pro-home .content .featured-content .widget-title::before,
.agency-pro-home .content .widget_text .widget-title:after,
.agency-pro-home .content .widget_text .widget-title:before {
     width: 5%;
}

That will shorten those white blocks.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[CaseyKt2013]

Thank you!! 🙂 🙂 🙂

[MoodyRiviera]

Here's a bit more information. Rather than just sizing down the browser window, I looked at your site with two actual mobile devices (not simulated)...both running most recent version of iOS...and here's the result:

iPad Safari: No gaps.
iPad Chrome: No gaps.

iPhone5C Safari: White gap just "above" the first image...no other gaps.

*MoodyRiviera*

[Author]

Posts