Is there a way to change the height of a section on mobile only?

Site URL: https://www.sierraccook.com/

Hello everyone!

I am struggling to figure out how to change the height sections on mobile. On a desktop, the large height sections look great, but on mobile they are spread way too far apart.

This is the amount of space on a desktop:

And this is the amount of space on mobile:

I would like for the distances to be about the same on both screens, and would also like for the images on mobile to be the same width. Since the images of the phones are actually background photos, changing the height of the sections on mobile causes them to shrink and moves them towards the center of the screen. I like that the images are mostly out of frame on mobile since there is much less screen space, so if there is a way to keep them like that and just fix the height of the sections, that would be lovely!!

To anyone that could that help me, thank you so so much in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5fc983babe6684539de08e06"] {
    min-height: 20vh !important;
}
[data-section-id="5fc983babe6684539de08e06"] + section {
    min-height: 20vh !important;
}
[data-section-id="5fc998b4e4017829c1640852"] {
    min-height: 20vh !important;
}
}

Thank you so much @tuanphan!!!!!!!! This solved my spacing issue perfectly!!!!!! However, now on mobile, the phone are mismatched, with the "Yelp Redesign" phone off frame and the other fully in frame. Is there a way to keep them all the same?

@tuanphan Nevermind! I figured it out! It was an issue with the amount of space the titles and descriptions took up in each section. I revised them so they each use the same amount of lines/space. Thank you so much for your help!!!!

On 12/12/2020 at 8:53 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5fc983babe6684539de08e06"] {
    min-height: 20vh !important;
}
[data-section-id="5fc983babe6684539de08e06"] + section {
    min-height: 20vh !important;
}
[data-section-id="5fc998b4e4017829c1640852"] {
    min-height: 20vh !important;
}
}

 

I'm trying to similarly shrink a section on mobile, but the 20vh height isn't doing very much. Tried switching it to 0px and it barely made a dent, which was strange. Tuan, do you have any ideas?

Site: https://www.lupoarms.com

password: lupo

CSS:

.image-swap img{
  position: absolute;
  height:auto;
}

.image-swap img {
    display: block;
    left: 50%;
    transform: translateX(-50%);
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}

#block-yui_3_17_2_1_1641240410508_1657 {
 display: block;
  margin: 0 auto;
  width: 50%;
}

.container {
    background-color: #ff5733;
    width: 100%;
  height: 100%;
    margin: 0 auto;
    /*overflow: hidden;*/
    }

/*phone shrink*/
@media screen and (max-width:1200px) {
[data-section-id="61d080f38e186f78e93ae953"] {
    min-height: 0px !important;
}
}

/* Change dropdown menu background */
  .header-menu-nav-item {
    background: #000000;
  }

10 hours ago, tomalexander96 said:

I'm trying to similarly shrink a section on mobile, but the 20vh height isn't doing very much. Tried switching it to 0px and it barely made a dent, which was strange. Tuan, do you have any ideas?

Site: https://www.lupoarms.com

password: lupo

CSS:

.image-swap img{
  position: absolute;
  height:auto;
}

.image-swap img {
    display: block;
    left: 50%;
    transform: translateX(-50%);
}
.image-swap img:nth-child(1) {
  z-index: 1;
  transition: .5s;
}
.image-swap img:nth-child(1):hover {
 opacity:0;
}

#block-yui_3_17_2_1_1641240410508_1657 {
 display: block;
  margin: 0 auto;
  width: 50%;
}

.container {
    background-color: #ff5733;
    width: 100%;
  height: 100%;
    margin: 0 auto;
    /*overflow: hidden;*/
    }

/*phone shrink*/
@media screen and (max-width:1200px) {
[data-section-id="61d080f38e186f78e93ae953"] {
    min-height: 0px !important;
}
}

/* Change dropdown menu background */
  .header-menu-nav-item {
    background: #000000;
  }

Resize section on homepage? If reduce height, black space will appear. I think you can consider replace mobile background with new image. What do you think?

@tuanphanI used your css code but how do I delete this white space on mobile. Looks fine on desktop any help, appreciated

On 6/18/2022 at 9:50 PM, 3van_hall said:

@tuanphanI used your css code but how do I delete this white space on mobile. Looks fine on desktop any help, appreciated

 

Hi. What is your site url?