Home › Forums › Pro Support › Row/Box Styling
- This topic has 10 replies, 2 voices, and was last updated 1 year, 11 months ago by
elvin.
-
AuthorPosts
-
October 17, 2021 at 7:13 pm #34697
Shaun
ParticipantHi
I am recreating this site https://www.epguidanceaustralia.com/blog-early-puberty here https://lyndal.websmall.net/all-posts/
I want to style the new site in a similar way to the old site but as you can see I am failing miserably.Specifically, I need some help with:
1. Images all being on the left-hand side rather than alternating
2. Text taking up 75% of the space rather than 50%Cheers
ShaunOctober 17, 2021 at 11:11 pm #34700elvin
ModeratorHi Shaun,
Try this CSS:
@media (min-width: 560px) { section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner { flex-direction: row; } section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img { object-fit: cover; width: auto; height: 100%; } section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image { flex: 1 0 25%; } } @media (max-width: 559px) { section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img { width: 100%; height: auto; } section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image { flex: 1 1 100%; } }
Note: Image cropping will occur on smaller viewports to keep the aspect ratio.
October 18, 2021 at 12:13 am #34717Shaun
ParticipantThx Elvin
I am just waiting to hear back from the client if they are happy with image/text width ratio but it looks great to me. Any chance you could comment out the code so I can learn for the future?
Cheers
ShaunOctober 18, 2021 at 9:51 pm #34751elvin
ModeratorI’ve added comments on what the parts do.
/* Media rule for larger mobile viewports to desktop viewports */ @media (min-width: 560px) { /* force all the image to go to the left side for "Row" card style */ section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner { flex-direction: row; } /* Make image cover the entire space of its container. Note: Image cropping will occur on smaller viewports */ section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img { object-fit: cover; width: auto; height: 100%; } /* Make the image wrapper occupy only 25% of the horizontal space */ section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image { flex: 1 0 25%; } } /* Media rule for really small mobile viewports */ @media (max-width: 559px) { /* Make the image wrapper occupy only 100% of the horizontal space for stacking */ section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img { width: 100%; height: auto; } /* Make the image wrapper occupy only 100% of the horizontal space for stacking */ section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image { flex: 1 1 100%; } }
October 18, 2021 at 10:01 pm #34753Shaun
ParticipantThx Elvin
Much appreciated.October 18, 2021 at 10:04 pm #34756elvin
ModeratorNo problem. 😀
October 19, 2021 at 5:16 pm #34771Shaun
ParticipantHi Again
The page you helped me with was showing all posts. I am now starting to add category pages eg https://lyndal.websmall.net/for-parents-category/
How do I modify the code for these pages?
I understand it has something to do with the list code (eg the above category list has ‘wpsp_display( 313 )’ but I’m unsure how to combine the code so it applies to several (at least 5) category lists.
Cheers
Shaun-
This reply was modified 1 year, 11 months ago by
Shaun.
October 21, 2021 at 12:35 am #34791Shaun
ParticipantJust checking in again for help with the above
October 21, 2021 at 1:31 am #34793elvin
ModeratorSomething like this should work:
/* Media rule for larger mobile viewports to desktop viewports */ @media (min-width: 560px) { /* force all the image to go to the left side for "Row" card style */ section#wpsp-299.wpsp-row article:nth-child(even) .wp-show-posts-inner, section#wpsp-313.wpsp-row article:nth-child(even) .wp-show-posts-inner { flex-direction: row; } /* Make image cover the entire space of its container. Note: Image cropping will occur on smaller viewports */ section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img, section#wpsp-313.wpsp-row .wp-show-posts-image.wpsp-image-left img { object-fit: cover; width: auto; height: 100%; } /* Make the image wrapper occupy only 25% of the horizontal space */ section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image, section#wpsp-313 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-313.wpsp-row .wp-show-posts-image { flex: 1 0 25%; } } /* Media rule for really small mobile viewports */ @media (max-width: 559px) { /* Make the image wrapper occupy only 100% of the horizontal space for stacking */ section#wpsp-299.wpsp-row .wp-show-posts-image.wpsp-image-left img, section#wpsp-313.wpsp-row .wp-show-posts-image.wpsp-image-left img { width: 100%; height: auto; } /* Make the image wrapper occupy only 100% of the horizontal space for stacking */ section#wpsp-299 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-299.wpsp-row .wp-show-posts-image, section#wpsp-313 .wpsp-card.wpsp-row .wpsp-content-wrap, section#wpsp-313.wpsp-row .wp-show-posts-image{ flex: 1 1 100%; } }
I basically just copied the selector, pasted it again and on the copy, I just changed the ID from 299 to 313. 🙂
October 21, 2021 at 2:02 am #34795Shaun
ParticipantThx Elvin
That makes sense to me.October 21, 2021 at 8:10 pm #34807elvin
ModeratorNo problem. 😀
-
This reply was modified 1 year, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.