Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

@media screen and (max-width:767px) { div#page-section-5efd0f6bbb54e267c6bc70d1 .image-block { width: 30% !important; } }  

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

Posted Images

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 post

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. 

Edited by hirethestache
Link to post
  • 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 post
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...