I am working on this site: https://www.avilestranslations.com/blog/
The outcome I want is that on the homepage I want the first parallax section after the header to be green, then the next one white, alternating all the way down.
I know if I am alternating the images to align left, align right all the way down the following code works:
section.bg-secondary{
background-color: #9cff88;
}
But, I ALSO want on mobile for the image within each section to appear at the bottom (below the button, i.e. the formatting that happens when parallax image “right” is chosen). With the above example since I had “left”, “right”, “left” … some of the images would be above their section and some below on the mobile view.
Is there a way to override the CSS on mobile so that even if the homepage parallax for desktop, the images are left, right, left right, that the mobile experience has the images defaulted to the bottom?
Or a way to more directly identify individual parallax sections (like you can with page-id’s) to change background colors?
Any solution ideas appreciated.
Thanks!
(P.S. - I’m not opposed to making changes to stylesheets.css etc. as needed, but I couldn’t find where the parameters for “.section” are even set.)
