7.1 adjusting banner and headings for big screens

Hello,

I've got the problem that my banner section looks awful on screens bigger than my laptop.

The banner is shown full width but cut off at the bottom. I want it to be full size.
Also I am wondering how to adjust the headings to a bigger size for bigger screens and change the margin-left
To make the proportions like on a smaller screen -  just everything bigger...

Thank you for your help!

Anyone who know what to do?

Hi. Do you still need help on this?

yes, I do

Hi. I see you solved by creating 2 sections for desktop - mobile. Then using CSS to show 1 section on desktop, show 1 section on mobile.

--

I see footer on tablet, seems has large space between text - border. If you want to reduce, we can give the code.

Hi, I didn't solve the problem. (Mobile view is fine) 
But on a big screen (bigger than my laptop) I've got the problem described above.
I need something like a code for big screens, so the banner section is not cut off and the headings are bigger.
Can you give me a code to solve this issue?

 

Add to Home > Design > Custom CSS

@media screen and (min-width:1500px) {
body#collection-5fc3cd554e98326c02857f7a #page section:first-child {
    min-height: 70vh !important;
}
div#block-yui_3_17_2_1_1606771877218_8072 {
  h1 {
      font-size: 100px;
  }
	h3 {
    font-size: 40px;
}
}
/* button */
div#block-yui_3_17_2_1_1607987761918_10336 a {
    font-size: 50px;
}
}

Awesome! Thanks a lot! 😊

Just one more thing - is it possible to move the headings further left and button further down?
This it how it looks right now:

@media screen and (min-width:1500px) {
body#collection-5fc3cd554e98326c02857f7a #page section:first-child {
    min-height: 70vh !important;
}
div#block-yui_3_17_2_1_1606771877218_8072 {
  h1 {
      font-size: 100px;
  }
	h3 {
    font-size: 40px;
}
}
/* button */
div#block-yui_3_17_2_1_1607987761918_10336 a {
    font-size: 50px;
    position: relative;
    bottom: -100px;
}
body#collection-5fc3cd554e98326c02857f7a #page section:first-child .content-wrapper {
    max-width: 90%;
}
}

New code

Awesome! 
Thank you so much! 😊

One more thing: How come there is no code existing in 7.1 adjusting the banner and headings according to the screen size?

Now, I have the problem that the banner for tablet (e.g. with resolution 1920 × 1200 px) is not full width but cut off on the right side.
Can you give me code for this, too?
 

On 12/22/2020 at 9:17 PM, ando_337 said:

One more thing: How come there is no code existing in 7.1 adjusting the banner and headings according to the screen size?

Now, I have the problem that the banner for tablet (e.g. with resolution 1920 × 1200 px) is not full width but cut off on the right side.
Can you give me code for this, too?
 

Use this CSS

/* resize tablet banner */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5fc3e08408845d092400c576"] {
    min-height: 1vh !important;
    height: 40vh;
    padding-top: 10vh !Important;
}
}