Jump to content

Mobile CSS: move image to top on smaller devices, text and button below

Recommended Posts

Site URL: https://oboe-orb-t2t6.squarespace.com/

Hello! Been searching this forum for awhile and cannot fix this problem. What is CSS code for moving image to the top so the text can span full-width on mobile/tablets only?

This is a overlap image block card with other CSS styling already applied.

PW: peanut (I am using 7.1 trial so hopefully this works since I cannot publish until I upgrade)

Using this so far:

@media screen and (max-width:800px) 
  {[data-section-id="60a3d67d070c213253baad5f"] .sqs-block-image .design-layout-overlap
    {display: block;
    width: 100%;}
  }

1505604895_ScreenShot2021-06-05at3_33_34PM.thumb.png.64b68e857d8f31affe1c95d906078fec.png

 

 

 

Also, trying to make the boxes equal height on desktop 

1793942992_ScreenShot2021-06-05at3_38_58PM.thumb.png.c4cf9e9c920d5c700eaee3ca6849987e.png

Link to comment
  • Replies 3
  • Views 2k
  • Created
  • Last Reply

Hi,

Q1. Add to Design > custom CSS

/* Mobile-Thrive Boxes */
@media screen and (max-width:767px) {
div#page-section-60a3d67d070c213253baad5f figure {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    padding: 20px !important;
}
}

Q2. It looks like you solved this?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan

 

Thank you! that worked for the mobile cards - I just added some extra CSS to the .image-inset to prevent overlap.

 

I think I solved it too but my client said on her screen she was seeing it as uneven. I'll have to clarify if she was just in the "working screen" not the actual viewing of the page. It always looks different there which is frustrating.

 

Your solutions have helped me so much with building this site as I've never used CSS in big ways before, thank you for being such a resource.

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.