Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


DaronP

Question

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
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

12 answers to this question

Recommended Posts

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

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

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

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

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

Create an account or sign in to comment

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


×
×
  • Create New...