Fluid design in vertical and horizontal mobile view

Support
#1

Hi guys,

Been struggling with making a design fluid on both vertical and horizontal mobile screens. Currently have a custom heading/text element “Digital creative solutions” with a class .hero-heading and the following css:

Blockquote
/* Vertical alignment - Digital Creative Solutions */
@media only screen and (max-width: 480px) {
.hero-heading {
padding-top: 15%;
}
}
@media only screen and (min-width:481px) and (max-width: 767px) {
.hero-heading {
padding-top: 17%;
}
}
@media only screen and (min-width:768px) and (max-width: 979px) {
.hero-heading {
padding-top: 15%;
}
}
@media only screen and (min-width: 980px) {
.hero-heading {
padding-top: 12%;
}
}

When going through different mobile screens using http://lab.maltewassermann.com/viewport-resizer/ I do ran into an issue: when viewed vertically the heading/text element is barely below the logo and the menu, and when viewed horizontally it has enough spacing between the logo and the menu, but in some cases it is pushing the button below it, out of the screen. And the button is being displayed over the next section (the first section has a height:100vh; so it displays at full browser screen).

Is there a way to style the spacing of the custom heading/text element appropriately for both horizontal and vertical view?
link: https://kryptonitecreative.com/

#2

Hi There,

Please see this first:

You’re CSS is correct and working as expected. Those CSS you have share is meant to adjust the space on top of the heading: Digital Creative Solutions. Now regarding the issue of the button being out of the screen, it is because, it just doesn’t fit. We can reduce the line height and default bottom margin of the text Get your products & services in front of millions of people so the screen can accommodate the button.

See this: https://screencast-o-matic.com/watch/cb6l1FIGYW
Add custom-text on the class field on text element.

@media only screen and (min-width:481px) and (max-width: 767px) {
   .custom-text p {
      margin-bottom: 10px !important;
      line-height: 1;
    }
}

Hope this helps.

1 Like
#3

Awesome, thank you so much for the help! It works great!

One more question, is there a way to adjust the space above “Digital Creative Solutions” in horizontal and vertical view of the screen? https://prnt.sc/gy649s

Regards,
Petar

#4

Hi Petar,

Please update this :

@media only screen and (max-width: 480px) {
h1.hero-heading {
    font-size: 1.9em !important;
    margin-top: 60px;
}}

to:

@media only screen and (max-width: 480px) {

h1.hero-heading {
    font-size: 1.9em !important;
    margin-top: 60px;
}}

Hope it helps

#5

What exactly is the difference between the two of them? The two snippets of code look exactly the same to me…

#6

Hi there,

Ah, sorry for the confusion. Please change this

@media only screen and (max-width: 480px) {
    h1.hero-heading {font-size:1.9em !important;}
}

to this

@media only screen and (max-width: 480px) {
    h1.hero-heading {
          font-size:1.9em !important;
          margin-top: 60px;
}}

Just change the 60px value depending on your preference.

Thanks!

1 Like
#7

Thank you so much for the help, this makes sense! But the question still remains - is it possible to have two different styles - one for horizontal and one for vertical view?

Petar

#8

Hi Petar,

Yes, you need to use different @media queries.

For example

@media only screen and (max-width: 979px) {
    h1.hero-heading {
          font-size:1.9em !important;
          margin-top: 30px;
}}

@media only screen and (max-width: 767px) {
    h1.hero-heading {
          font-size:1.9em !important;
          margin-top: 40px;
}}

@media only screen and (max-width: 480px) {
    h1.hero-heading {
          font-size:1.9em !important;
          margin-top: 60px;
}}

For more information kindly refer to the links below

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope that helps

1 Like
#9

Awesome, thanks for the help!

But it seems like there is a bit of misunderstanding in the question above - trying to achieve the same “look” for a screen size, which does not change - for instance iPhone 7. The padding around the elements in the first section changes depending on the screen orientation although the screen size does not change. That was what I am referring to - how to adjust for horizontal and vertical screen view…

Thank you!

#10

Hi,

The way it works, when the orientation changes the screen size/width also changes.

But you can also add orientation to your media queries.

If you have reviewed the links I provided, there are samples you can use for each specific screen size and orientations.

eg. For example for changing padding of your hero heading in portrait and landscape you can add this in Custom CSS

/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
          h1.hero-heading {
                padding:30px;
          }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
          h1.hero-heading {
                padding:20px;
          }
}

You can use chrome developer tools to target the elements that you need to adjust.

Hope that helps.

1 Like
#11

Thank you, it does!

#12

Glad to hear it.

Cheers!