Resizing a specific image only in Tablet view?

Site URL: http://www.pantryphilosophy.com

I need to resize and center this image on Tablet and remove the hyphen on the title.

I am using the following code:

//IMAGE RESIZE ON TABLET//
@media screen and (max-width: 1024px)and (min-width:641px){
#block-yui_3_17_2_1_1596512003680_56399 {
width: 100% !important;}
}

//REMOVE HYPHENS MOBILE & TABLET VIEW//
@media screen and (max-width: 1024px)and (min-width:641px) {
p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}
}

PASSWORD: Pantry

Hi. I see you solved?

The image though is not centered and can;t make it larger. Any ideas?

On 8/12/2020 at 11:46 PM, jlama said:

The image though is not centered and can;t make it larger. Any ideas?

Add to Home > Design > Custom CSS

/* Center image tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-5ef2d2af43817b4f70dfcfd2>.row:first-child {
.span-4:nth-child(2) {
    width: 50%;
	overflow: hidden;
}
.span-4:nth-child(1), .span-4:nth-child(3) {
    width: 25%;
}
}
}

Having a similar issue. I've resized my tablet view images with the following code:

@media screen and (max-width:768px) {
.homepage figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}
 

but now need to resize text to avoid gray spaces everywhere. Any ideas? Also trying to move the site navigation back up to one line rather than 2.

Site: www.southernsunevents.com

Password: sse2020

On 2/25/2021 at 1:10 AM, SouthernSunEvents said:

Having a similar issue. I've resized my tablet view images with the following code:

@media screen and (max-width:768px) {
.homepage figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}
 

but now need to resize text to avoid gray spaces everywhere. Any ideas? Also trying to move the site navigation back up to one line rather than 2.

Site: www.southernsunevents.com

Password: sse2020

 

Hi. Remove your code & let me know. I will give the new code

5 hours ago, tuanphan said:

Hi. Remove your code & let me know. I will give the new code

@tuanphanIt's been removed. Thanks!

It looks like you added some other CSS. Do you still need help on this?

On 3/3/2021 at 8:25 AM, tuanphan said:

It looks like you added some other CSS. Do you still need help on this?

@tuanphanStill having this issue. I've used the following for the image resize but now when I try to adjust the overlay text large sections get greyed out and banner images get cut/rearranged. Any ideas?

First shot attached is before and second is after trying to adjust text. 

Site: www.southernsunevents.com

Password: sse2020

Code I used for image resize...
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(1) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e61166c9f9a545c228981fa/1613063589855/82.N%26N-416_id109374907.jpg?format=2500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(1) .Index-page-image img {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(2) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601d80b87affa87cb4212442/1614193166900/Jenni+Chandler+Photog+1.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(2) .Index-page-image img {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(3) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e6116f73d879f7082676743/1609349400689/BLAIRSVILLE_GEORGIA_WEDDING_MEGAN%26KYLEDSC_7045.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(3) .Index-page-image img {
    display: none;
  }
}