Prevent Code Blocks from stacking on mobile

Site URL: http://ariix.com.mx/nutrifii

Hey guys, I am working on a site that has some icons (as code blocks) and I am having trouble when the display is switched to mobile. 

In desktop the code blocks appear on the same row, however as we know in mobile everything is stacked. I have tried several CSS codes without avail. I can't seem to find a way to make the images appear on the same row when on mobile. 

On the attachments you will be able to see how the display is on desktop and how it stacks them and messes up the row on mobile. 

Thanks in advance!

With current layout, you can't place 3 images/row

if you want image 1 + 2/row, image 3 in new row (& center), we can give the code

1 hour ago, tuanphan said:

With current layout, you can't place 3 images/row

if you want image 1 + 2/row, image 3 in new row (& center), we can give the code

This would be great @tuanphan I would greatly appreciate it! I just want to mobile to look more user friendly, and 2 images per row (and then the other code block below) is perfect. 🙂 

13 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597357570172_21037+.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Worked perfectly. Thank you!!!

Hello @tuanphan sorry to bother you again, hope you can help me out again, I would greatly appreciate it!

I have several icons on the webpage: https://ariix.com.mx/nutrifii which didn't work with the code, all others did work. For example the blue and green icons (attachment) don't show up as two columns on mobile. I am targeting the spacer block ID which is on top of the icons for the code, is that the problem? 

And the last question, there is another page with icons, https://ariix.com.mx/slenderiiz on which I also applied the code above but the icons still stack on mobile, I think I am targeting the wrong Block ID.

Any tips or help is appreciated!

Nutriti.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597362199849_52271 + .row>.span-4>.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1597362199849_52271 + .row img {
    width: 100% !important;
}
}

Hello, @tuanphan! I had a similar question and wondering if I can keep all three of the social icons under my headshot to stay in a row in mobile on my "About" page.

Site: https://khaki-orange.squarespace.com/about

Password: Sleigh123

I was able to find the row ID, but I've tried a few variations above and can't get anything to stick on mobile. The social icons are stacking huge directly underneath my image, and I'd love for them all to stay the same on mobile as they are on desktop in that row.

Thanks!

19 hours ago, stephaniteleigh said:

Hello, @tuanphan! I had a similar question and wondering if I can keep all three of the social icons under my headshot to stay in a row in mobile on my "About" page.

Site: https://khaki-orange.squarespace.com/about

Password: Sleigh123

I was able to find the row ID, but I've tried a few variations above and can't get anything to stick on mobile. The social icons are stacking huge directly underneath my image, and I'd love for them all to stay the same on mobile as they are on desktop in that row.

Thanks!

Add to Design > Custom CSS

/* Mobile-About-3 icons same line */
@media screen and (max-width:767px) {
/* top icons */
div#block-fc7090f60a80bc123976+.row .span-2 {
    width: 33.3333% !important;
    float: left !important;
}
/* bottom icons */
div#block-yui_3_17_2_1_1631502267627_17050+.row .span-1 {
    width: 33.3333% !important;
    float: left !important;
}
}

Perfect, @tuanphan! Thanks so much ❤️

Hey @tuanphan I'm dealing with the same issue. Could you please help me?

https://www.hardlyinitiated.com/

password: hardlyinitiated

It's at the bottom of the home page, the strip that says "Join the Gang". Will be putting social icons here but for now there are fillers in place.

On 12/4/2021 at 5:34 AM, Trentwann said:

Hey @tuanphan I'm dealing with the same issue. Could you please help me?

https://www.hardlyinitiated.com/

password: hardlyinitiated

It's at the bottom of the home page, the strip that says "Join the Gang". Will be putting social icons here but for now there are fillers in place.

Use code to Custom CSS

@media screen and (max-width:767px) {
 div#page-section-61aac2b9de56262d89818fab .span-12 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-61aac2b9de56262d89818fab .span-12 .span-2:nth-child(2n+1) {
    clear: left !important;
}   
  }

To change to 3 items/row, edit 50% to 33.3333%

Hey, @tuanphan.

Please help!

I have a rather large page and am having a great deal of trouble preventing my icons/images from stacking. I tried all of the codes posted above and none have been effective.

The page on my site I am mainly referring to is linked here. If you look in desktop mode, you can see the design I have opted for. However, if you look in mobile mode, it is truly disastrous. 

Please help -- the page I linked above is for one of my clients. I published her first book and am building a bio on my site for her. I do not want to release the page to the public with the way it is viewed in mobile mode -- most internet surfers use mobile these days, and this is truly not mobile friendly.

Is there a specific code I can insert into the Design/CSS in order to ensure the above linked page will look the same whether on desktop view or mobile.

This would be a life saver!!

Aisha

19 hours ago, Atabdul09 said:

Hey, @tuanphan.

Please help!

I have a rather large page and am having a great deal of trouble preventing my icons/images from stacking. I tried all of the codes posted above and none have been effective.

The page on my site I am mainly referring to is linked here. If you look in desktop mode, you can see the design I have opted for. However, if you look in mobile mode, it is truly disastrous. 

Please help -- the page I linked above is for one of my clients. I published her first book and am building a bio on my site for her. I do not want to release the page to the public with the way it is viewed in mobile mode -- most internet surfers use mobile these days, and this is truly not mobile friendly.

Is there a specific code I can insert into the Design/CSS in order to ensure the above linked page will look the same whether on desktop view or mobile.

This would be a life saver!!

Aisha

Add to Design > Custom CSS

/* Mobile 4 social icons */
@media screen and (max-width:767px) {
div#page-61d7b6e7641d064be2dba1e9>.row:nth-child(4) .span-12 .span-1 {
    width: 25% !important;
    float: left !important;
}
}