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

Change size of specific image when viewing on mobile


doshea

Question

Hi,

I am using the brine template...

I want to target and control the size of a specific image when changing between desktop, tablet and mobile.

The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile.

Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached.

website: tbktest.squarespace.com 

 

Thanks in advance.

Dan.

Screenshot 2019-11-15 at 09.53.08.png

Screenshot 2019-11-15 at 09.52.53.png

Screenshot 2019-11-15 at 09.52.40.png

Link to comment

Recommended Posts

  • 0
16 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
img.Mobile-bar-branding-logo {
    width: 200px;
}
}

That worked! Thank you so much, Tuan! ❤️ 

One more sizing question for the same page.

Issue: The "How I Can Help You" button at the top of the page is HUGE on mobile.

Question: How do I make this button the same size as the other buttons on the page?

 

Edited by shykoala4
Link to comment
  • 0

Hi again!

Thanks for your help with resizing my logo on mobile!

One more question.

Issue: I want to target and control the button size when changing between desktop and mobile.

Template: Brine (Sonny)

Image: The teal button "How I Can Help You" at the top of the page.  The button size is perfect when in desktop and tablet modes, but too big on mobile. See images attached.

Question: Can you help me make the button smaller for mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

 

DESKTOP IMAGE

Ideal Size Header Logo - Desktop.png

 

MOBILE IMAGE

Too Small Header Size Logo - Mobile.png

Link to comment
  • 0
On 7/9/2020 at 2:25 AM, shykoala4 said:

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
figure#yui_3_17_2_1_1594589428149_66 a {
    padding: 5px 10px;
    font-size: 10px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 7/12/2020 at 5:32 PM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
figure#yui_3_17_2_1_1594589428149_66 a {
    padding: 5px 10px;
    font-size: 10px !important;
}
}

 

Hi Tuan, 

Unfortunately that custom CSS didn't work for the button.

Here's a screenshot of the mobile version:

Screen Shot 2020-07-14 at 4.40.01 PM.png

Link to comment
  • 0
6 hours ago, shykoala4 said:

Hi Tuan, 

Unfortunately that custom CSS didn't work for the button.

Here's a screenshot of the mobile version:

 

Try again with this

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1553711899470_3767 a {
    padding: 5px 10px;
    font-size: 10px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
19 hours ago, tuanphan said:

Try again with this


@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1553711899470_3767 a {
    padding: 5px 10px;
    font-size: 10px !important;
}
}

That worked, thank you, Tuan!

I'm also getting a weird extra space thing now on my mobile view too. I'll post a brand new reply about it.

 

Link to comment
  • 0

Hi Tuan,

Thank you again for all your help! I promise this is my last question for a while 🙂

 

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile. 

See images below and attached. 

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

 

DESKTOP:

1905945781_ScreenShot2020-07-15at6_44_55PM.thumb.png.e6db751f021f696e8b3a931a4d130aa6.png

 

MOBILE:

44424434_ScreenShot2020-07-15at6_45_14PM.png.41e16a8681f631f65afb876d2473d613.png

Link to comment
  • 0

I have also applied the code below to attempt and make the logo a bit bigger on tablet view:

@media only screen and (max-width: 768px) {
  div#block-yui_3_17_2_1_1595463768673_25773 {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

 

The logo gets a bit bigger but not the size I still want. Any ideas?

Screen Shot 2020-08-04 at 7.30.05 AM.png

Link to comment
  • 0
On 7/16/2020 at 6:00 AM, shykoala4 said:

Hi Tuan,

Thank you again for all your help! I promise this is my last question for a while 🙂

 

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile. 

See images below and attached. 

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

Missing your notification. Have you solved it yet?

8 minutes ago, jlama said:

I have also applied the code below to attempt and make the logo a bit bigger on tablet view:

@media only screen and (max-width: 768px) {
  div#block-yui_3_17_2_1_1595463768673_25773 {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

 

The logo gets a bit bigger but not the size I still want. Any ideas?

Can you share site url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
15 minutes ago, jlama said:

http:// www.pantryphilosophy.com 

Password: Pantry

Add to Home > Design > Custom CSS

/* Footer logo on tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksBottom .span-12 .span-2 {
    width: 70%;
}
div#footerBlocksBottom .span-12 .span-5 {
    width: 15%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0

Hello I have the same issue
but in my case the image I want to resize for mobile is so many and im not used to doing the codes
can anybody help me?

my page is unpublished here's the sample page link:

https://orb-hexahedron-g54x.squarespace.com/productsandservices
password: speedwork2020

it would be helpful if someone can help me with this. Tried the solution it did get smaller but the right side becomes empty. pls help. thanks

Link to comment
  • 0
3 hours ago, Speedwork said:

Hello I have the same issue
but in my case the image I want to resize for mobile is so many and im not used to doing the codes
can anybody help me?

my page is unpublished here's the sample page link:

https://orb-hexahedron-g54x.squarespace.com/productsandservices
password: speedwork2020

it would be helpful if someone can help me with this. Tried the solution it did get smaller but the right side becomes empty. pls help. thanks

Remove code you used & add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
13 minutes ago, tuanphan said:

Remove code you used & add this to Design > Custom CSS


@media screen and (max-width:767px) {
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Thank you this worked on my first tab. thank you so much.
but it doesnt on my second tab. 

any advise?

Capture4.PNG

Link to comment
  • 0

Hello - @lu.diehl. The code you shared at the beginning of this thread worked great for me. However, I'm trying to get the image (logo mark) centered on mobile and tablet view. I added   position: center;   to the code provided but wasn't successful in getting it repositioned. Do you know how I can make that happen?3579557_ScreenShot2020-11-16at12_24_49AM.thumb.png.1cdc349f8639e1bd21e0c59650d4ac26.png

Many thanks!

Link to comment
  • 0
10 hours ago, ACScruggs said:

Hello - @lu.diehl. The code you shared at the beginning of this thread worked great for me. However, I'm trying to get the image (logo mark) centered on mobile and tablet view. I added   position: center;   to the code provided but wasn't successful in getting it repositioned. Do you know how I can make that happen?

Many thanks!

Hey @ACScruggs-- can you share a link to your website? 

Link to comment
  • 0
14 hours ago, ACScruggs said:

I see footer fine on mobile. With tablet, add this to Home > Design > Custom CSS

/* resize tablet fotoer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5faf5ce5162257496b6fea9b .span-12 .span-4 .span-2 {
    width: 100%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
13 hours ago, ACScruggs said:

@tuanphan Hi! That code didn't move the sunburst graphic to the center in mobile view. I corrected the typo fotoer to footer but that didn't seem to be the issue. 

1193500867_ScreenShot2020-11-17at12_13_09PM.thumb.png.352914aaf5fe73fc607e7ac5e18ad875.png

Mobile or tablet or both? Above code for tablet

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 11/18/2020 at 11:27 PM, ACScruggs said:

@tuanphan Mobile view. (However, it needs to be centered in both, but I'm only trying to correct mobile view.)

Add to Home > Design > Custom CSS

/* resize center footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605764657479_34733 {
    width: 30%;
    margin: 0 auto;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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