Jump to content

Controlling image icon sizes on mobile. Completely lost, I've tried all the steps I can find on here.

Recommended Posts

Site URL: https://therobertpaulgroup.squarespace.com/home

On the Services section on https://therobertpaulgroup.squarespace.com/home, I am having trouble scaling the icon images on mobile. They look fine on desktop (below) but I cannot figure out how to retain a max width on mobile. 

image.thumb.png.2f1ac14a56686d6d03c6bf1e590d1676.png

 

Below are mobile (horiz) and mobile (vert)No description available.

No description available.

 

I am attempting to mimic the styling seen on The Markam Group, which retains scale and position across desktop and mobile: 
https://www.markhamgroup.com/services/

 

So far I've tried the following code (with proper block codes) with no success. 

/* mobile screens */
@media only screen and (max-width: 640px) {
  #block-unique-ID{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

Any help is greatly appreciated!

Link to comment
  • Replies 11
  • Views 648
  • Created
  • Last Reply
8 hours ago, tuanphan said:

Above code should work. Did you target correct ID? Or use this CSS, it will target 8 icons


@media screen and (max-width:640px) {
div#block-1dda138206e1344d38fe + .row .image-block {
    width: 30%;
}}

 

I really appreciate that. This had it working for a second, but then I moved a block around and now I can't figure out the block ID. Using SS Block ID extension in Chrome, and I've gone through every one from top to bottom, replacing the block in the code above.

Link to comment

That worked! Thank you! The icons still stack above their respective text block, though. Do you have any suggestion on how to retain positioning *and* scaling, like seen in the examples below? 

Desktop: 

image.thumb.png.7c8c74019e48316ab8fd841417d00f2b.png

Tablet:

image.thumb.png.3bb4f1149668d005fadb37d02fb30180.png

Mobile:

 image.thumb.png.ef74248e24b322957d1e2b8b77954031.png



The only workaround I can think of is replacing the whole image & text blocks with flattened image blocks that contain rasterized text. Not ideal at all, but it's really the only way I can think of keeping it all homogenous. 

Link to comment
6 hours ago, tuanphan said:

Hi. I see you solved. Do you still need help on this?

The solution is only somewhat temporary. I created the "Services" blocks as flattened images, but I would really love to utilize responsive text. Do you think it's even possible on Squarespace to implement the same responsive functionality as seen on https://www.markhamgroup.com/services/

Link to comment
  • 3 weeks later...

Hi! I'm having similar issues... the top two image blocks (the one that says flora moda and the triptych beneath that) on my home page are not scaling for mobile. I'd like them to scale down to fit on mobile. my site is floramoda.co  password:flowers Thanks in advance for any help!

Link to comment
7 hours ago, DruH said:

Hi! I'm having similar issues... the top two image blocks (the one that says flora moda and the triptych beneath that) on my home page are not scaling for mobile. I'd like them to scale down to fit on mobile. my site is floramoda.co  password:flowers Thanks in advance for any help!

Add to Home > Design > Custom CSS

/* resize mobile image */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh !important;
}
.homepage #page section:nth-child(2) {
    min-height: 30vh;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.