Icon image on mobile device becomes huge template "Ready"

Site URL: https://cosmocookery.com/en/home

Hello everyone, 

when you open my home page on a mobile device the sizes of the three icons on the right (next to the Picture) become massive. I would line up the three icons (which have links connected to them) beneath the large group photo.  

I tired using different CSS solutions I found in the forum, but none of them worked. I did not manage wot write my own custom solution because I am quite new to CSS.

Possibly someone could give me some tipps.. 

Thank you in advance! 

PS: I have a bilingual site..  therefore I have to two homepages. Incase that should be mentioned.

Add to Home > design > custom CSS

@media screen and (max-width:640px) {
div#page-5e3ee5794b6b8940ee75caf0 .span-11+.span-1 {
    display: flex;
}
div#page-5e3ee5794b6b8940ee75caf0 .span-11+.span-1>div {
    width: 33%;
}
}

thank you so much tuanphan! ☺️

my english home page looks perfect (I actually figured it looks better to set "display" to "none" and blend out the icons on mobile view after all ...) , but my German home page  https://cosmocookery.com/de/home hasn't been affected. 

Since there are other images I want to reduce in size for mobile view (like the one showed beneath), id like to know what parameter in the code has to change to address certain images. 

One last question: is it possible to get rid of the three dots on the bottom right in mobile view and immediately show the social links? that would make the experience so much more intuitive...

Thanks a lot! 

21 hours ago, wlbww said:

thank you so much tuanphan! ☺️

my english home page looks perfect (I actually figured it looks better to set "display" to "none" and blend out the icons on mobile view after all ...) , but my German home page  https://cosmocookery.com/de/home hasn't been affected. 

Since there are other images I want to reduce in size for mobile view (like the one showed beneath), id like to know what parameter in the code has to change to address certain images.   

One last question: is it possible to get rid of the three dots on the bottom right in mobile view and immediately show the social links? that would make the experience so much more intuitive...

Thanks a l

@media screen and (max-width:640px) {
/* icon size */
div#block-9d87eba8dd6605922ee3+.row>.col {
    width: 50% !important;
}
}

Where social? I don't see...

On 5/2/2020 at 3:15 PM, tuanphan said:

@media screen and (max-width:640px) {
/* icon size */
div#block-9d87eba8dd6605922ee3+.row>.col {
    width: 50% !important;
}
}

Where social? I don't see...

Hi tuanphan,

actually I figured that my priority lays within the task of also changing the icons on the German home page (URL: https://cosmocookery.com/de/home).

I've decided that it looks best if the icons disappear completely in the mobile view. I have managed to do so on the English site cosmocookery.com/en/home , but the German one remains unchanged. 

Do you think you could help me with that? 

The relocation of the social media icons can wait. 

Thank you so much !!!

4 hours ago, wlbww said:

 

 

 

@media screen and (max-width:640px) {
div#page-5dcafedf5be51c48c42e7095 .span-12 .span-11+.span-1 {
    display: none;
}
}

Thank you!