Jump to content

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

Recommended Posts

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:

 

408528068_ScreenShot2020-12-10at6_10_57PM.thumb.jpg.841a9128c3d7c24e8ec974bcc653f278.jpg

 

And this is the amount of space on mobile:

 

IMG_6771.thumb.jpg.a643a65ec8d68dd342946cea40225f6c.jpg

 

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!

Edited by Sierracc
grammar
Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 1 year later...
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;
  }

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 5 months later...
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

 

Screenshot 2022-06-18 at 15.47.45.png

Hi. What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.