Jump to content

Icon image on mobile device becomes huge template "Ready"

Recommended Posts

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.

1978823127_Bildschirmfoto2020-04-30um10_17_34.thumb.png.75c885cafc20cad7f53ce29dba2a8899.png455435238_Bildschirmfoto2020-04-30um10_17_49.thumb.png.438584c55c1e4ac6196514ce5d244767.png

 

 

 

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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. 

1150896488_Bildschirmfoto2020-05-01um17_48_53.thumb.png.5dce5f1607f9047e23e4e2dc0580f3ed.png  

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! 

 

 



 

 

 

Bildschirmfoto 2020-05-01 um 17.49.00.png

Link to comment
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...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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 !!!

image.png

Bildschirmfoto 2020-05-13 um 11.14.37.png

Link to comment
4 hours ago, wlbww said:

 

 

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.