Spacing above Title on Sales Page on Mobile?

Hey Moondreamer21,
I took a look at your page and css and found that you had a duplicate rule with a different value, so I took the one out that seemed to be causing the issue.

@media only screen and (max-width: 767px) {
  /*css styling for dashed line below page titles on mobile*/
#top #wrap_all h3.av-special-heading-tag {
    margin-top:-20px!important;
    padding-bottom:5px!important;
}
}

I don’t have a iPhone, so please clear your browser cache and check.

Best regards,
Mike

Hi,

Yes, Mike is a genius! :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
I took a look at your page and can say that the space was just a matter of removing the top padding, I added:

#top.page-id-983 #after_full_slider_1 .template-page.content {padding-top: 0px !important;}

I also found that your new optin form has a bottom margin, so I added:

#top.page-id-983 #optin {margin-bottom: 0px !important;}

To correct your page for tablets (768px) I added this css:

@media only screen and (min-width: 766px) and (max-width: 770px) { 
#top.page-id-983 #full_slider_1 {
max-height: 300px !important; 
}
#top.page-id-983 #optin {
    top: -45px !important; 
}
#top input[type="text"],#top input[type="email"] {padding: 2px !important; margin-bottom: 0px !important;}
.main_color input[type='submit'] {height: 24px !important; padding: 2px !important;}
}

Please check.
For the mobile sizes the special heading was giving a top margin, which I corrected with this css:

@media only screen and (max-width: 430px) { 
#top.page-id-983 .av-special-heading-h3 {
margin-top: 0px !important;
}
}

Now option form needs to be adjusted with css to fit inside the background image arrow, is this something your freelancer is going to be doing?

Best regards,
Mike

Hi,
For the mobile widths 375px (small mobile) & 425px (large mobile) I added this css:

@media only screen and (min-width: 381px) and (max-width: 430px) {
#top.page-id-983 #optin {
top: -30px !important;
left: 4px !important; 
width: 80% !important;
padding: 0px !important;
background: transparent !important; 
position: absolute !important; 
}
#top.page-id-983 input[type="text"],#top.page-id-983 input[type="email"] {
height: 12px !important;
padding: 1px !important;
font-size: 8px !important;
margin-bottom: 0px !important;
display: inline-block !important;
}
#top.page-id-983 input[type='submit'] {
height: 12px !important;
padding: 1px !important;
display: inline-block !important;
font-size: 8px !important;
margin: 0px !important;
}
#top.page-id-983 div#name {
width: 12% !important;
}
#top.page-id-983 div#email {
width: 12% !important;
}
#top.page-id-983 div#number {
width: 25% !important;
}
#top.page-id-983 div#submitbutton {
width: 10% !important;
}
#top.page-id-983 #wrap_all h3.av-special-heading-tag {
margin-top: 10px !important; 
}
}
@media only screen and (max-width: 380px) {
#top.page-id-983 #optin {
top: -45px !important;
left: 4px !important; 
width: 80% !important;
padding: 0px !important;
background: transparent !important; 
position: absolute !important; 
}
#top.page-id-983 input[type="text"],#top.page-id-983 input[type="email"] {
height: 12px !important;
padding: 1px !important;
font-size: 8px !important;
margin-bottom: 0px !important;
display: inline-block !important;
}
#top.page-id-983 input[type='submit'] {
height: 12px !important;
padding: 1px !important;
display: inline-block !important;
font-size: 8px !important;
margin: 0px !important;
}
#top.page-id-983 div#name {
width: 12% !important;
}
#top.page-id-983 div#email {
width: 12% !important;
}
#top.page-id-983 div#number {
width: 25% !important;
}
#top.page-id-983 div#submitbutton {
width: 10% !important;
}
#top.page-id-983 #wrap_all h3.av-special-heading-tag {
margin-top: 10px !important; 
}
}

Please clear your browser cache and check.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
To fix the “footer” in the code block on that page I enabled the element options for developers, Enfold Theme Options > Layout Builder > Show element options for developers, and added the class “tips-footer” to the code block, and then added this Quick CSS:

@media only screen and (max-width: 767px) { 
.tips-footer {
margin-top:100px !important; 
}
.tips-footer span {
font-size: 8px !important;
}
}

I also adjusted the code above, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Very good, we will keep it open for now.

Best regards,
Mike

Hi,
I took a look at your new page and added this Quick CSS:

/*xmas page*/
@media only screen and (max-width: 300px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 120px !important; 
}
}
@media only screen and (min-width: 301px) and (max-width: 380px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 140px !important; 
}
}
@media only screen and (min-width: 380px) and (max-width: 430px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 160px !important; 
}
}
@media only screen and (min-width: 431px) and (max-width: 610px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 210px !important; 
}
}
@media only screen and (min-width: 611px) and (max-width: 770px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 270px !important; 
}
}
@media only screen and (min-width: 771px) and (max-width: 910px) { 
#top.page-id-15492 #full_slider_1 {
	    height: 310px !important; 
}
}
/*end xmas page*/

Please clear your browser cache and check, please feel free to make any adjustments as needed.

Best regards,
Mike

Hi,
Glad to help :)
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike