How to edit size of Custom Content image size for mobile - debut theme

r_layos
Tourist
6 0 3

Hi,

I would like to ask some help regarding my custom HTML section. 

I have been able to add images with working links.

It looks fine on desktop however in mobile it looks too big.

Any way on how to make the images compact and proportional in mobile?

It would be best if it will appear in a row. or atleast 2 x 2 grid. same as the one in desktop view

 

Here's how it looks like in desktop view

Desktop.jpg

 

and here's how it looks like in mobile view

 

Mobile.jpg

Your response is highly appreciated!

 

 

KetanKumar
Shopify Partner
20633 2141 7814

@r_layos 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
r_layos
Tourist
6 0 3

Hi KetanKumar,

 

Thank you for the quick revert. It’s www.kawayanph.com

KetanKumar
Shopify Partner
20633 2141 7814

@r_layos 

Thanks for store UL

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
.custom__item.small--one-whole.one-quarter.align--top-middle {
-webkit-flex: 0 0 50%;
    -moz-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
r_layos
Tourist
6 0 3

Hi KetanKumar, 

Thank you for this! It worked perfectly on the 1st line.

However, i would like to ask if how to do the exact same thing for this 2nd line?

 

international.jpg131111442_295120711928201_2934058280805811984_n.jpg

0 Likes
r_layos
Tourist
6 0 3

Hi Ketan Kumar,

May i ask for your reply regarding my 2nd query?

I really appreciate your response..


Thanks!

KetanKumar
Shopify Partner
20633 2141 7814

@r_layos 

KetanKumar_0-1607699815439.png

 

do you mean like this?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
r_layos
Tourist
6 0 3

Hi Kumar,

Good day!

Is it possible to have the 3 icons appear in 1 row?


Thanks

0 Likes
r_layos
Tourist
6 0 3

Hi Kumar,

As checking with our desktop view, our 2nd line it looks perfectly fine. 

However, in the mobile view, it appears separated.

 

B5C644E2-9F3B-43EB-B79A-857FFDD03D2A.jpeg

AE0E5066-E1A9-4D04-BA22-61C53BF42AD8.png

  

0 Likes
KetanKumar
Shopify Partner
20633 2141 7814

@r_layos 

Yes, please add this code

@media screen and (max-width: 768px) {
.custom-content .custom__item:nth-child(7), .custom-content .custom__item:nth-child(8), .custom-content .custom__item:nth-child(9) {
-webkit-flex: 0 0 33.3333%;
    -moz-flex: 0 0 33.3333%;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes