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 post
  • Answers 85
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below: /* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID

Hi @lu.diehl thanks for your answer, very useful and should work I think. It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an i

Hi, thank you both for your support. In the end i took Graemetg's adive and change the logo to text rather than an image.  

Posted Images

Recommended Posts

  • 0
On 11/23/2020 at 2:12 AM, ACScruggs said:

@tuanphan I am trying to center the sunburst image located in the content block below the header (not in the footer) - aka the second content block below the header on the home page. Below the text that says ELEVATED. EMPOWERED. ECO-FASHION. 

Thank you for your help!! 

Hi. Do you still need help on this?

Link to post
  • 0

Hello @tuanphan you helped me but i need more help....

i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work.

But only the first symbol reacts to the changed width the other ones doesn´t 

I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. 

I am not a coder, so i tried my best. 

can you help me please? 

Site: finanzenverstehen.at/startseite-1

Pw: test1234

Thank you and sorry for my bad english. 

 

 

mobile.JPG

Link to post
  • 0
On 1/10/2021 at 8:05 PM, philfv said:

Hello @tuanphan you helped me but i need more help....

i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work.

But only the first symbol reacts to the changed width the other ones doesn´t 

I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. 

I am not a coder, so i tried my best. 

can you help me please? 

Site: finanzenverstehen.at/startseite-1

Pw: test1234

Thank you and sorry for my bad english. 

 

 

mobile.JPG

Hi. Your current layout can't change to 2 items/row on mobile.

You need to adjust a bit.

Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1
Do similar for Image Block 5, 6, 7

Step 2. Let me know. I will give the code on mobile.

Link to post
  • 0
11 hours ago, tuanphan said:

Hi. Your current layout can't change to 2 items/row on mobile.

You need to adjust a bit.

Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1
Do similar for Image Block 5, 6, 7

Step 2. Let me know. I will give the code on mobile.

Ok i think i did it. 

I dragged the images 4, 5 , 6 below the other ones and they took the width of it.

Thx. 

Edited by philfv
Link to post
  • 0
23 hours ago, philfv said:

Ok i think i did it. 

I dragged the images 4, 5 , 6 below the other ones and they took the width of it.

Thx. 

Add to Custom CSS

/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div {
    width: 50%;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
}

 

Link to post
  • 0
1 hour ago, tuanphan said:

Add to Custom CSS


/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div {
    width: 50%;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
}

 

Thank you very much!!!! 

You are an absolutely nice guy! 

Greetings from cold and snowy Austria.

Link to post
  • 0

Hello @tuanphan

Could I please also get your help? 
I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. 

This is a link to the site - https://lion-toucan-jd9l.squarespace.com

It's for the opening image underneath the logo and first 2 paragraphs. 

Thanks :) 

Link to post
  • 0
On 11/15/2019 at 3:19 PM, lu.diehl said:

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below:


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

Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

Hi, this worked for me but my image is not all the way to the left, is there a way to center it?

 

Thank you in advance for your help!

Link to post
  • 0
On 1/13/2021 at 11:25 PM, TI-Group said:

Hello @tuanphan

Could I please also get your help? 
I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. 

This is a link to the site - https://lion-toucan-jd9l.squarespace.com

It's for the opening image underneath the logo and first 2 paragraphs. 

Thanks :) 

Remove this code

.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}

Add this new code

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

 

Link to post
  • 0
On 1/14/2021 at 11:36 PM, Imanixyz said:

Hi, this worked for me but my image is not all the way to the left, is there a way to center it?

 

Thank you in advance for your help!

Can you share site url? We can check easier

Link to post
  • 0
3 hours ago, tuanphan said:

Remove this code


.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}

Add this new code


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

 

It worked! Thank you so much 😄

Link to post
  • 0

Hello!

 

I would like to control the logo size in the footer.

In desktop, it displays correct (I've added spacer blocks on both sides of the logo).

On mobile and tablet, it displays way to large.

I've tried this CCS code, but can't get it to work:

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

Could it be because this is in the footer? 

 

Website: https://spinach-keyboard-w7ws.squarespace.com/

PW: hoyden2021

 

Thanks in advance

 

 

 

--------------

In desktop, the logo displays correct:

461310674_Screenshot2021-01-22at12_16_34.thumb.png.65ed76102a2ad49c79c27a9762ee5520.png

 

 

 

In mobile, it displays too large:

873269678_Screenshot2021-01-22at12_18_55.png.067e34ae1e48599a027679df4940eefe.png

Link to post
  • 0

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1611311458556_32109 {
    width: 50% !important;
    margin: 0 auto;
}
}

 

Link to post
  • 0
On 7/12/2020 at 11: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 @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. 

Site URL: molliekeane.com

 

Thank you!

Screenshot 2021-01-24 at 15.12.00.png

Link to post
  • 0
On 1/13/2021 at 10:36 AM, tuanphan said:

Add to Custom CSS


/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div {
    width: 50%;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
}

 

Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? 

 

Look at the attached Pic.

On iOS Devices the size is absolute perfect but on android it isn´t.

 

Thank you, again! 

android.jpg

Link to post
  • 0
On 1/24/2021 at 7:13 AM, CillianS said:

Hi @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. 

Site URL: molliekeane.com

 

Thank you!

Screenshot 2021-01-24 at 15.12.00.png

It looks like you solved Site Title, however, if you check on iPhone 5, site title still 2 lines. Add this new code

/* site title one line */
@media screen and (max-width:767px) {
a#site-title {
    font-size: 40px;
    white-space: nowrap !important;
}
}

With buttons, where is button? I don't see it on homepage

Link to post
  • 0
7 hours ago, philfv said:

Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? 

 

Look at the attached Pic.

On iOS Devices the size is absolute perfect but on android it isn´t.

 

Thank you, again! 

android.jpg

Try new code

/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div {
    width: 50%;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
div#block-yui_3_17_2_1_1610231497033_26238+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) {
	clear: left !important;
}
}

 

Link to post
  • 0

Hi all...really useful tips here for Brine users. Thanks.

Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk .....

Any help gratefully received.....:)

Screenshot 2021-02-03 at 11.55.17.png

Link to post
  • 0
On 2/3/2021 at 7:28 PM, Jamiepeterhugh said:

Hi all...really useful tips here for Brine users. Thanks.

Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk .....

Any help gratefully received.....:)

Screenshot 2021-02-03 at 11.55.17.png

Can you share link to page in screenshot? We can  check easier

Link to post
  • 0

Hello,

I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva

Can someone help? Thanks in advance!

Link to post
  • 0
7 minutes ago, EditionStudios said:

Hello,

I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva

Can someone help? Thanks in advance!

I tried using this code but then it adds blank space under the photo

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

Screen Shot 2021-02-08 at 1.23.22 PM.png

Link to post
  • 0

Updated -- this code seemed to work, but I'm having the same issue with a photo lower in the page

/* Tablet */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
}
}

Screen Shot 2021-02-08 at 1.27.50 PM.png

Link to post
  • 0
17 hours ago, MichaelCaz said:

Updated -- this code seemed to work, but I'm having the same issue with a photo lower in the page


/* Tablet */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
}
}

Screen Shot 2021-02-08 at 1.27.50 PM.png

Add to Design > Custom CSS

/* resize second image */
@media screen and (max-width:767px) {
[data-section-id="5fac1e6282b16a4c5a40d048"] {
    min-height: 20vh !important;
    height: 30vh;
}
}

 

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