Mobile layout for image block

Site URL: https://sprout-tuna-swnf.squarespace.com/

Halfway down my homepage there are 4 image cards, each with a title, displaying in two columns. However, when this switches to one column on mobile, the image takes up the full width of the screen and the title sits underneath it.

How would I be able to have the title sit next to the image in the same column? This would look much tider. Like this:

instead of how it actually looks on mobile:

Any help would be much appreciated!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 {
    display: flex;
}
div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 .intrinsic {
    width: 40%;
}
div#block-yui_3_17_2_1_1581330880897_19993+.row .image-block-v2 .image-card-wrapper {
    width: 60%;
}
}

Hi,

I'm experiencing the same issue with this site: https://www.mgadv.no/kontakt
Any help would be much appreciated. 

On 2/10/2021 at 8:27 PM, 19blue said:

Hi,

I'm experiencing the same issue with this site: https://www.mgadv.no/kontakt
Any help would be much appreciated. 

Add to Design > Custom CSS

/* kontakt icon text side by side */
@media screen and (max-width:767px) {
div#page-section-601c878e78a1067166d81580 .span-12>div:nth-child(n+3) figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
}

On 2/14/2021 at 3:29 AM, tuanphan said:

Add to Design > Custom CSS

/* kontakt icon text side by side */
@media screen and (max-width:767px) {
div#page-section-601c878e78a1067166d81580 .span-12>div:nth-child(n+3) figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
}

 

Hi again @tuanphan

I´ve made some updates to the website and somehow the vertical text/image alignment is off. Would you know how to fix this? It was originally center aligned vertically, and not so far away from the circle.

Thank you.

3 hours ago, 19blue said:

Hi again @tuanphan

 

I´ve made some updates to the website and somehow the vertical text/image alignment is off. Would you know how to fix this? It was originally center aligned vertically, and not so far away from the circle.

Thank you.

Can you add the code & Don't edit anything?

21 hours ago, tuanphan said:

Can you add the code & Don't edit anything?

Didn't seem to do the trick...

On 4/23/2021 at 6:51 AM, 19blue said:

 

Didn't seem to do the trick...

It see it seems fine here?

On 4/24/2021 at 3:31 PM, tuanphan said:

It see it seems fine here?

The tekst was previously aligned to the vertical center of each cirlces. now they have dropped down.

I'm also having this issue and the codes aren't working for me...has anyone solved this? 

The website is inteliqore.squarespace.com and the password is "p@ssword". 

On 8/7/2021 at 7:41 AM, dreyahb said:

I'm also having this issue and the codes aren't working for me...has anyone solved this? 

The website is inteliqore.squarespace.com and the password is "p@ssword". 

 

Hi. You want to make them to 2 columns on mobile??

Yes! I am wanting it to look like this. 

On 8/12/2021 at 9:36 AM, dreyahb said:

Yes! I am wanting it to look like this. 

Add to Design > Custom CSS

/* Mobile icons */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1626657499507_12309+.row {
.intrinsic {
    transform: unset !important;
    margin: unset !important;
    float: left !important;
}
figcaption.image-card-wrapper {
    float: left !important;
    width: calc(~"70% - 20px");
    margin-left: 20px;
}}
}

It worked!!! Thank you so much!!! 

Hi Tuanphan, 

The code above isn't working on my site anymore. Would you be able to check it out and see what how I'm interfering with it?

Thank you so much!!!

On 8/26/2021 at 12:31 AM, dreyahb said:

Hi Tuanphan, 

The code above isn't working on my site anymore. Would you be able to check it out and see what how I'm interfering with it?

 

Thank you so much!!!

Just answered your message. You can check again. If it works, you can share for other members.

Thank you!

Hey @tuanphan
Would you mind helping me out with my website?
https://oleander-chicory-9t2h.squarespace.com/ (password is: umoweb)

I have 16 heads on the homepage and would like to have 2 heads side by side on the mobile version. Is this possible?

On 12/21/2021 at 10:45 PM, benja said:

Hey @tuanphan
Would you mind helping me out with my website?
https://oleander-chicory-9t2h.squarespace.com/ (password is: umoweb)

I have 16 heads on the homepage and would like to have 2 heads side by side on the mobile version. Is this possible?

Hi. Add to Design > Custom CSS

/* Mobile homepage 16 heads */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1638192805985_20063~.row .span-3 {
    width: 50% !important;
    float: left !important;
}

div#block-yui_3_17_2_1_1638192805985_20063~.row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

@tuanphan awesome! thank you so much!