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

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


Sierracc

Question

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

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5fc983babe6684539de08e06"] { min-height: 20vh !important; } [data-section-id="5fc983babe6684539d

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

Posted Images

3 answers to this question

Recommended Posts

  • 1

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

 

Link to post
  • 0

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?

IMG_7289.thumb.jpg.a5630661b17ee0277bc725cb5d594d12.jpg 

IMG_7290.thumb.jpg.19620e2a9bc231b4ba836d687c50052d.jpgIMG_7291.thumb.jpg.3f8dce1dd2b085ede892676ff7f05521.jpg

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