Jump to content

Issue with text on right aligned image card on mobile

Recommended Posts

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:
image.thumb.png.ef6c3b196b61c31155bd1c868a49f053.png

And here's how it looks on mobile: 
(Left aligned)
image.png.260cde7a1738c19148e0984cb2797a7f.png

(Right aligned)
image.png.5bb8f55304c5263f8376bb197afadc8e.png

 

Any thoughts as to why this isn't working correctly?

Link to comment
  • Replies 4
  • Created
  • Last Reply
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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.