Jump to content

How to stop images stacking on mobile version of the website?

Recommended Posts

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

How to stop images stacking on mobile version of the website?

 

In 3 sections - 1) what they didn’t teach you 2)blog posts 3) free downloads

https://www.makingcentsofsaving.com/

 

I want it to minimise instead of stacking as it makes the website long. 

 

I have gone through all the Site Styles and I am unable to find anything.

 

Any suggestions? THANKS SO MUCH

Edited by Emily88
missing details
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, Emily88 said:

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

How to stop images stacking on mobile version of the website?

 

In 2 sections - 1) what they didn’t teach you 2) free downloads

https://www.makingcentsofsaving.com/

 

I want it to minimise instead of stacking as it makes the website long. 

 

I have gone through all the Site Styles and I am unable to find anything.

 

Any suggestions? THANKS SO MUCH

Do you mean arranging the items on these sections into 2 columns or some thing like that?

Greeting, it's 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, Keyword Highlighter
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
7 hours ago, bangank36 said:

Do you mean arranging the items on these sections into 2 columns or some thing like that?

Thanks for responding!

 

Keep the existing column structure, ie 4 column for the first section (what they didn't teach you) and 3 columns for the downloads section.

 

I'd like 2 columns instead of 3 for the blogposts section. 

 

I hope that makes sense, thanks so much!

Link to comment
On 5/17/2022 at 3:45 AM, Emily88 said:

Thanks for responding!

 

Keep the existing column structure, ie 4 column for the first section (what they didn't teach you) and 3 columns for the downloads section.

 

I'd like 2 columns instead of 3 for the blogposts section. 

 

I hope that makes sense, thanks so much!

Add to Design > Custom CSS

/* Mobile Layout */
@media screen and (max-width:640px) {
/* Teach you */
div#page-6281eaa9e6429c419732c1a7 {
.span-3 {
    width: 25% !important;
    float: left !important;
}
.span-3 .image-block {
    width: 90% !important;
    padding: 0 !important;
}
.span-3 * {
    font-size: 10px !important;
    line-height: 20px;
}}
/* blog */
div#block-yui_3_17_2_1_1612094346230_18935 {
.summary-item {
    width: calc(50% - 30px) !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin: 15px !Important;
}
.summary-item:nth-child(2n+1) {
    clear: left !important;
}}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 2 weeks later...
On 5/20/2022 at 7:12 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Layout */
@media screen and (max-width:640px) {
/* Teach you */
div#page-6281eaa9e6429c419732c1a7 {
.span-3 {
    width: 25% !important;
    float: left !important;
}
.span-3 .image-block {
    width: 90% !important;
    padding: 0 !important;
}
.span-3 * {
    font-size: 10px !important;
    line-height: 20px;
}}
/* blog */
div#block-yui_3_17_2_1_1612094346230_18935 {
.summary-item {
    width: calc(50% - 30px) !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
    margin: 15px !Important;
}
.summary-item:nth-child(2n+1) {
    clear: left !important;
}}}

 

 Thank you so much for your help!!!

With that code I still can't get the blog section centred. I attached a screenshot of what it's like.

I tried to tweak the code and still doesn't look right. I am trying to fix the blog section and the free download section to be mobile friendly. The free download section won't resize at all. Thanks so much for all your help!!!!!

https://www.makingcentsofsaving.com/

 

 

/* Mobile Layout */

@media screen and (max-width:640px) {

 

/* free downloads */

div#page-60167cbb74b1fb4ada5b5b3f {

.span-4 {

    width: 25% !important;

    float: center !important;

}

.span-4 .image-block {

    width: 90% !important;

    padding: 0 !important;

}

.span-4 * {

    font-size: 10px !important;

    line-height: 20px;

}}

  

 /* blog */

div#block-yui_3_17_2_1_1612094346230_18935 {

.summary-item {

    width: calc(50% - 10px) !important;

    float: center !important;

    padding: 0 !important;

    clear: none !important;

    margin: 15px !Important;

 

}

  

.summary-item:nth-child(2n+1) {

    clear: left !important;

  }}}

Screen Shot 2022-06-03 at 4.51.20 pm.png

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.