Community Forums › Forums › Archived Forums › General Discussion › AgentPress Pro Theme – Featured page alignment
- This topic has 8 replies, 2 voices, and was last updated 6 years, 5 months ago by markrob.
-
AuthorPosts
-
November 15, 2017 at 10:09 am #213589markrobMember
Hello,
I'm trying to align the featured page widget in "home middle 1". Aligment is fine in the top and bottom widget areas. If I add featured pages to the home middle 1 section it won't align to the left and right causing the layout to be off. I have changed the size of the featured page widget to make 3 larger sections like the featured post widget but dont think this is the problem. Home bottom is setup like I want to have for the home middle 1 area. Any help is appreciated.
Thanks, Mark
http://homeelevators.comNovember 15, 2017 at 11:18 am #213595ErikaParticipantMark,
Set up the Home Middle 1 area so I can inspect the code. I can then see how it looks and how to fix it.
November 15, 2017 at 11:48 am #213597markrobMemberHi Erika,
It's all set for you to take a look. The first widget is off slightly to the right pushing the second over and the third down.
Thanks, Mark
November 15, 2017 at 12:23 pm #213601ErikaParticipantMark,
Thanks! This code should fix your issue:
.home-middle-1.widget-area .featured-content.featuredpage {
background-color: #fff;
padding: 0px !important;
float: left;
width: 31%;
}Simply find it in you Style.css sheet and replace the original with what I've given you above. You're also going to need the codes below for mobile responsiveness. Just copy and paste the whole thing in near the other responsive codes in the style.css sheet.
@media only screen and (max-width: 1023px) {.home-middle-1.widget-area .featured-content.featuredpage {
float: left;
width: 31% !important;
}
}
@media only screen and (max-width: 768px) {.home-middle-1.widget-area .featured-content.featuredpage {
float: left;
width: 100%;
}
}
@media only screen and (max-width: 480px) {.home-middle-1.widget-area .featured-content.featuredpage {
float: left;
width: 100%;
}
}Let me know if this helps!
November 15, 2017 at 12:44 pm #213602markrobMemberOk it's one row now but the left and right images are still off from the edge. Trying to get the outside edges to be inline with the red box above or directly inline with the corresponding images below.
Thanks, Mark
November 15, 2017 at 1:04 pm #213604ErikaParticipantMark,
Ok, replace the first code I gave you with this one:
.home-middle-1.widget-area .featured-content.featuredpage {
background-color: #fff;
padding: 5px !important;
float: left;
width: 33.3%;
margin: 0px;
}Let me know if it helps!
November 15, 2017 at 1:13 pm #213605markrobMemberYes that worked the edges are now inline, thank you! The space between the images looks a little tight? How would I increase to match the images below?
November 15, 2017 at 1:58 pm #213607ErikaParticipantMark,
You can play with the padding and width of the code to see if you can achieve the look you like. Unfortunately I can't seem to find a way to easily achieve the same look as the images in the other section, so you'd have to hire me to fully look into the issue and fix it (this is just a volunteer forum). Or, you can wait to see if another developer has an easy solution to offer.
November 15, 2017 at 2:51 pm #213609markrobMemberErika,
Thanks for the help, I will keep in mind.
Mark
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.