Sections order

:( I have one more problem. I addded screenshot.

Thx!

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .site-main {
        display: block;
    }
}

Did you figure out the second issue? It looks good to me.

Let me know :)

Please, open webpage on mobile phone. I see this problem on Iphone 6. Thx

Where change it this code, please?

@media (max-width: 768px) {
    .site-main {
        display: block;
    }
}

Hi there,

add the code to Customizer > Additional CSS.

Whilst in there also look for this CSS:

.inside-page-hero {			
	margin-left: 40px;
	margin-right: 50%;
}

and change it to:

.inside-page-hero {			
	padding-left: 40px;
	margin-right: 50%;
}

Hi, section order is okey now. Tjx!

Second solution did not work. I did not find a class ".inside-page-hero", when I added to Customizer > Additional CSS, I see no change. I added screenshot from mobile phone.

Thank you so much

Can you remove this CSS:

/* ------
Page Header
------- */

.page-hero {
  height: 100vh;
  background-size: 70vh;
  background-position: 90%;
}
.inside-page-hero {			
	margin-left: 40px;
	margin-right: 50%;
}

@media (max-width: 419px ){
  .page-hero {
		min-height: 568px;
		background-position: 42vw !important;
	}
  .inside-page-hero {
    margin-left: 20px !important;
		margin-right: 20% !important;
  }
}
@media (min-width: 420px) and (max-width: 768px) {
  .page-hero {
    background-position: 60vw !important;	
    background-size: 60vh !important;
  }
  .inside-page-hero {
    margin-right: 40% !important;
  }
}

and the last line:

.inside-page-hero {			
	padding-left: 10px;
}

Once thats done - let me know and ill provide some new CSS.

Hi, mobile version looks good, but desktop version is broken now.

Right desktop.

Thx for a help! :)

Now add this CSS:

@media (min-width: 769px) {
    .page-hero {
        background-size: contain !important;
        background-position: right center !important;
    }
}

In the Header Element you can add some padding so the text doesn't touch the edges.

Thanks, look good. :) Last problem is with Heading 1, Heading 2. I need padding-left: 40px;. The old class generates problem.

.inside-page-hero {			
	padding-left: 10px;
}

Do you have a solution, please?

Instead of using CSS - edit the Header Element there is an option to add padding.