Jump to content

How to make an image with text float beside each other in Mobile view

Recommended Posts

Just wondering if anyone can help with an issue I am facing.

I have a card image block on my home page of my website (image with text to the right hand side of it)

and when i go into mobile view the image will stack ontop of the text, Whereas I want the image and text to sit next to eachother like how it is in Desktop view (Image with text to the right hand side)

Any help or any recommendations of Custom CSS i can add will be very helpful!

Ive attached some photos for context. 

Screen Shot 2021-01-21 at 11.38.43 pm.png

Screen Shot 2021-01-21 at 11.38.22 pm.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

On 1/27/2021 at 7:32 PM, DaronP said:

Ive just made it public for you to see, the url is http://daronprice.com.au

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-1b64e265f8231f61509a figure {
    display: flex;
}
div#block-1b64e265f8231f61509a figure>div {
    padding-right: 10px;
}
}

 

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...
2 hours ago, Menar said:

Hi Tuanphan, I have a similar request to DaronP but I need the text and image blocks to appear side by side on mobile across my whole site except the home page, would you be able to assist?

https://menar-website.squarespace.com/home

Password: Menar@2021

screencapture-menar-website-squarespace-overview-2021-05-21-14_48_41.thumb.png.d9331529d16a557649f611ee69b91348.png

 

Can you share link to page in screenshot?

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
2 hours ago, Menar said:

I think stacked with image on top will be better.

To make them side by side, add to Design > Custom CSS

/* Mobile-Overview-Image text */
@media screen and (max-width:767px) {
div#page-section-60865d9b67faf379749b1391>.row>.col:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
}

 

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
On 5/27/2021 at 5:01 PM, Menar said:

Could I also please try your 'I think stacked with image on top will be better' suggestion?

Add to Design > Custom CSS

/* Mobile-Overview */
@media screen and (max-width:767px) {
div#page-section-60865d9b67faf379749b1391 {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-60865d9b67faf379749b1391 * {
    text-align: left !important;
}
}

 

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

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.