Jump to content

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

Go to solution Solved by tuanphan,

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%;}





Also, trying to make the boxes equal height on desktop 


Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment



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

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.