elilongwell Posted April 21, 2020 Share Posted April 21, 2020 Site URL: https://daisy-chameleon-5pc5.squarespace.com/modules Site: https://daisy-chameleon-5pc5.squarespace.com/modules PW: mothership I've run into an issue where my right aligned image cards aren't able to have their text centered in mobile view. On each of my pages, I've got alternating images on the left and right with their caption text on the opposite side. This looks great on desktop, but when I view it on moble, it looks strange since the text is right or left aligned under the stacked image. I've been able to play around with different css snippets to center the texts for these image blocks, but for some reason I can't get anything to work to adjust the right aligned images. This is the one I've got working on the left aligned images, but it's not working on the right aligned ones. @media screen and (max-width:640px) { .image-block-v2 { text-align: center !important; } } Here's how it looks on desktop: And here's how it looks on mobile: (Left aligned) (Right aligned) Any thoughts as to why this isn't working correctly? Link to comment
ChrisBartow Posted April 21, 2020 Share Posted April 21, 2020 Can try this CSS instead? @media screen and (max-width:640px) { .image-card p { text-align: center !important; } } Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
elilongwell Posted April 21, 2020 Author Share Posted April 21, 2020 1 minute ago, ChrisBartow said: Can try this CSS instead? @media screen and (max-width:640px) { .image-card p { text-align: center !important; } } Huh.. so that sort of worked. It centered the body text, but reverted the title text back to the original alignments for each one. Link to comment
ChrisBartow Posted April 22, 2020 Share Posted April 22, 2020 Progress! This should hopefully do it. @media screen and (max-width:640px) { .image-card h3, .image-card p { text-align: center !important; } } Creating websites using Squarespace at Design by Donuts 🍩 Link to comment
elilongwell Posted April 22, 2020 Author Share Posted April 22, 2020 Unfortunately it's still doing the weird heading thing. I tried it with h1 and h2 just to make sure there wasn't something weird going on, but same for those. I actually changed "p" to "*" and it seemed to fix anything. I don't see any unintended issues yet... so I suppose that will work for now! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.