Jump to content

Stacking Text Below Image on Tablet Like Mobile

Recommended Posts

Site URL: https://www.bloomingaylesmarin.com/

I'm trying to get the text block ("Bloomingayles") to the right of the top image on the page to stack on a tablet below the flower image (on left) using a media query, but I'm not able to make it work the way it does on mobile. Can anyone help please? Thank you!

This is the way it's currently displaying on tablet size screen....



BUT I want it to display like this on the tablet screen:



Edited by Softkind
Link to comment

Add to Design > Custom CSS

/* Stacked elements */
@media screen and (max-width:991px) and (min-width:768px) {
html, body {overflow-x:hidden;}
div#page-section-618ed332e4b3b960a6632b5a .span-12 .col {
    width: 90% !important;
    margin-left: 5%;
    margin-right: 5%;
div#block-yui_3_17_2_1_1636750205557_3972 {
    display: none;


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
  • 3 months later...

Is there a way to exclude this part of the index section?


Hi @tuanphan I have added this to a section on my website https://www.hornbeamtraining.co.uk/courses

which worked well on the areas wanted it to take effect736540231_Screenshot2022-04-11at00_13_16.thumb.png.e794c8c608095b45ea24774b69365544.png I


but it has messed up the top section within the index section 



Is there a way to exclude this part of the index section? 


this is the code I popped in - 

@media screen and (max-width:900px) and (min-width:641px) {
section#mental-health-first-aid .col, section#mental-health-first-aid .col {
    float: none !important;
    width: auto !important;


I have removed until I can solve as the site is going live! 

Any help is apreciated  🙂 



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.