- This topic has 30 replies, 2 voices, and was last updated 4 years, 6 months ago by David.
-
AuthorPosts
-
September 12, 2019 at 6:54 am #1007661gedosan
LOL your secrets safe with me 😉
One slight issue – I was planning to have more than one row on the page.
I wanted to have the top row be image left, text right
Then all the other rows image right, text left.
The CSS you provided will flip the image/text order on all instances of the row item, right?
September 12, 2019 at 7:00 am #1007674DavidStaffCustomer SupportMaybe… probably … it uses nth-child selectors to switch them around. Add a few more posts and let me know and ill take a look.
September 12, 2019 at 7:01 am #1007679gedosanjust added another…take a look
September 12, 2019 at 7:18 am #1007697DavidStaffCustomer SupportAah ok for separate lists – try this, in the Additional Settings there should be a setting to add a CSS Class. Give it a class of
row-reverse
then change the CSS provided before for:@media (min-width: 769px) { .wpsp-row.row-reverse .wp-show-posts-inner { flex-direction: row-reverse; } }
September 12, 2019 at 7:28 am #1007705gedosanCool that worked…
to adjust the columns in the row-reverse ones, I’ve created this…sort of worked, but can you check please…
.wpsp-row.row-reverse .wp-show-posts-image
{
flex: 1 0 50%;
}.wpsp-card.row-reverse wpsp-row .wpsp-content-wrap {
flex: 1 0 50%;
}September 12, 2019 at 7:30 am #1007711DavidStaffCustomer SupportTry this:
.wpsp-row.row-reverse .wp-show-posts-image { flex: 1 0 50%; } .wpsp-card.row-reverse .wpsp-content-wrap { flex: 1 0 50%; }
September 12, 2019 at 7:50 am #1007830gedosanok perfect, nearly there. How do I control..
– vertical space between pic and title
– horizontal space between rowsThanks!
September 12, 2019 at 7:59 am #1007840DavidStaffCustomer SupportAs each of the WPSP lists are in a Section you can add Top and Bottom Padding to the section to create space between rows.
On the bottom two rows you have a large space between the image and the Title/Meta because the image isn’t big enough to fill the column,
September 12, 2019 at 8:13 am #1007850gedosanWas going well until I shrunk down the screen to see how responsive the layout is! The top row is kind of ok, but the reverse-rows aren’t responsive. Bummer.
September 12, 2019 at 8:49 am #1007871DavidStaffCustomer SupportUpdated CSS here to fix that
September 12, 2019 at 8:57 am #1007875gedosanThat’s superb…however, the bottom rows aren’t left aligned with the top one? – something is making them indent?
September 12, 2019 at 9:22 am #1007896gedosanI think this is it right…let me know if there’s a more eloquent way of doing it. Thanks for all your help.
@media(min-width: 769px) {
.wpsp-row .wpsp-content-wrap {
padding-top: 0px !important;
padding-left: 15px !important;
padding-right: 9px !important;
}
}
@media(min-width: 769px) {
.wpsp-row.row-reverse .wpsp-content-wrap {
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 10px !important;
}
}September 12, 2019 at 9:22 am #1007897DavidStaffCustomer SupportCheck the WPSP settings image alignment and set it to left, it defaults to center, and the gap is there because the images aren’t large enough for the container.
September 12, 2019 at 9:24 am #1007900DavidStaffCustomer SupportYou can combine multiple CSS rules within the one Media query:
@media (min-width: 769px) { .css-rule-1 { /* Styles here */ } .css-rule-2 { /* Styles here */ } .css-rule-3 { /* Styles here */ } }
September 12, 2019 at 4:10 pm #1008222gedosangreat thanks for all the help David
-
AuthorPosts
- You must be logged in to reply to this topic.