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

3 images side by side on mobile view


mikom10

Question

Recommended Posts

  • 0
On 10/20/2021 at 6:41 PM, Crevlon said:

Hi! Is also someone willing to help me?

I try to get 3 pictures side by side on mobile view. I tried already the following code and some of the others mentioned in this thread:

/* services side by side */
@media screen and (max-width:767px) {
div#page-section-5e6cc0c7ddeb2e162ecf51b9>.row>.span-4 {
    width: 33.33% !important;
    float: left !important;
}
div#page-section-5e6cc0c7ddeb2e162ecf51b9>.row>.span-4 * {
    font-size: 12px;
}
}

Nothing worked until now. I am also not 100% sure if I am using the right section/block ID. 

Any idea? 

Hi,

Can you share link to page where you have problem? We can help easier

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 10/22/2021 at 1:02 AM, Crevlon said:

Hi tuanphan!

Sure: https://www.marco-behrens.com/meine-geschichte

 

It is about the three big social media icons on that page.

Add to Design > Custom CSS

/* Mobile-Social Icons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634724975353_102974+.row>.col {
    width: 33.3333% !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
3 hours ago, prowheelscobiee said:

Hi tuanphan,

Please help! my website is prowheels.uk 

I've just put 3 new icons on my home page, the 3 gold ones with steps 1, 2, 3.

Please can you help so on mobile view they show side by side and not top to bottom.

Thanks in advance!

Alex

Can you add a space block before 3 image blocks in this page for easier selector Css?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 10/25/2021 at 4:43 PM, prowheelscobiee said:

Hi tuanphan,

Please help! my website is prowheels.uk 

I've just put 3 new icons on my home page, the 3 gold ones with steps 1, 2, 3.

Please can you help so on mobile view they show side by side and not top to bottom.

Thanks in advance!

Alex

Add to Design > Custom CSS

/* Mobile 123 */
@media screen and (max-width:767px) {
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-4 {
    width: 33.3333% !important;
    float: left !important;
}
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-8 {
    width: 66.6667% !important;
    float: left !important;
}
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-8 .span-4 {
    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
18 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile 123 */
@media screen and (max-width:767px) {
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-4 {
    width: 33.3333% !important;
    float: left !important;
}
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-8 {
    width: 66.6667% !important;
    float: left !important;
}
div#page-section-61765c94bcedc112d056a2b3 .span-12>.row>.span-8 .span-4 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks so much!!

Link to comment
  • 0

@tuanphan :: I am having the same issue (3 images in a section of 7.1 wanting to keep them 3 across when mobile loads). I have tried everything I know, including snippets from above, but I can not get it to work. Please help! I am struggling to move on from this on the project.

Secondary question/concern: this is a mock for approval; so when I am in final development and replace all these images, will I have to re-do this code?

Screen Shot 2021-11-10 at 11.04.58 AM.jpg

Link to comment
  • 0
On 11/11/2021 at 12:07 AM, wsmedia said:

@tuanphan :: I am having the same issue (3 images in a section of 7.1 wanting to keep them 3 across when mobile loads). I have tried everything I know, including snippets from above, but I can not get it to work. Please help! I am struggling to move on from this on the project.

Secondary question/concern: this is a mock for approval; so when I am in final development and replace all these images, will I have to re-do this code?

Screen Shot 2021-11-10 at 11.04.58 AM.jpg

Hi,

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
On 11/15/2021 at 7:48 AM, vsigmas said:

Hello @tuanphan

Could you please help me too?

I've added 3  icons to a podcast page on my website: https://www.vayasigmas.com/businesspresso.
For the mobile version of this page, I’m using alternative (more condensed) images.

Please, can you help having them sitting side by side on mobile?

Thank you in advance!

Vaya

Screenshot 2021-11-15 at 01.38.56.png

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-90e233b406e418f525bf+.row>.col:nth-child(-n+3) {
    width: 33.3333% !important;
    float: left !important;
}
div#block-90e233b406e418f525bf+.row>.col:nth-child(-n+3) .image-block {
    background-size: 50%;
}
}

 

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 11/15/2021 at 9:31 AM, maria39 said:

Which CSS is exactly works for you? As there are many people share many files!

Can you share link to page where you have problem? WE can help easier

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 1/24/2021 at 4:33 AM, betterbelocal said:

@tuanphan Hi, would really appreciate it if you can help me solve this problem. 

 

On https://betterbelocal.com/regina-restaurants I have the Logo with Name below I currently have 4 logos across on desktop view. I would like to have 2 across on mobile view but currently its just stacking it which makes for loads of scrolling 1 business at a time. Anyway you can fix this please? Thank you very much.

Also Moving Company  have this type of issue.

your Manu is great what type of changing you expect from it?

Edited by raenenkhan
Link to comment
  • 0
4 hours ago, wsmedia said:

The sight is not launched yet so the url is custom: "https://gopher-green-mnwk.squarespace.com/"

Your site is still private now. Can you share it with the protected password for us to check?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
10 minutes ago, wsmedia said:

Please help if you can. I am still having trouble getting code to work for this for some reason.

Is it the result you want to achieve in mobile?

image.png.5f0a77a788468313c3ec9efe59aa9336.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 11/17/2021 at 7:32 PM, tuanphan said:

 

 

56 minutes ago, bangank36 said:

Is it the result you want to achieve in mobile?

image.png.5f0a77a788468313c3ec9efe59aa9336.png

Yes that is the result I want to achieve in mobile, but with the section above those, that had the bottles as single images. When I go to mobile, it stacks them one-on top-of another. I want the 3 separate images to be side-by-side in mobile, like shown above.

Edited by wsmedia
Link to comment
  • 0
1 minute ago, wsmedia said:

 

Yes that is the result I want to achieve in mobile, but with the section above those, that had the bottles as single images. When I go to mobile, it stacks them one-on top-of another. I want the 3 separate images to be side-by-side in mobile, like shown above.

 

Screen Shot 2021-11-23 at 12.07.59 PM.jpg

Link to comment
  • 0
4 hours ago, wsmedia said:

 

Screen Shot 2021-11-23 at 12.07.59 PM.jpg

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	section[data-section-id="618bf362eaeb6d040b7a5ee6"]  .content .span-12 .row {
		display: flex;
	}

	section[data-section-id="618bf362eaeb6d040b7a5ee6"]  .content .span-12 .row  > .col {
		width: 33.33% !important;
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
16 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	section[data-section-id="618bf362eaeb6d040b7a5ee6"]  .content .span-12 .row {
		display: flex;
	}

	section[data-section-id="618bf362eaeb6d040b7a5ee6"]  .content .span-12 .row  > .col {
		width: 33.33% !important;
	}
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

PERFECT!!!! Works great. I think I kept using the wrong section ID.... and that really matters! lol. Thank you so much for providing this. It really helped me complete my project.

Link to comment
  • 0
18 minutes ago, wsmedia said:

PERFECT!!!! Works great. I think I kept using the wrong section ID.... and that really matters! lol. Thank you so much for providing this. It really helped me complete my project.

It 's good to know about that, bro!

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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...