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

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 May 16, 2022 by Emily88
missing details

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?

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!

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;
}}}

 

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;

  }}}