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
  • Views 266
  • 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.