SouthernSunEvents

I'm not seeing the issue you're are seeing.

 

I am seeing a perhaps different issue. A white band at the right side of the website. Usually indicates an overflow issue. It appears to happen at only some screen widths.

The gray you see in this pic is not part of the screen image. It is the background behind my screen size test resolution.
These two issues could have the same cause manifesting in different ways.
I don't have a solution at this time.

try change 991px to 1024px

@SouthernSunEvents
Input the screen resolution on my test set up. Didn't notice anything. That doesn't mean much because the test setup doesn't perfectly replicate a real devices behaviour.
Anyone have a first gen iPad Air they can test on and let us know what you find?

Add to Design > Custom CSS
/* Mobile primary secondary nav spacing */ a.Mobile-overlay-nav-item { padding-top: 0px !important; }  

use top: -100px;
 

Use new code
/* Footer spacing */ @media screen and (max-width:640px) { div#footerBlocksTop .span-12>.row:first-child .sqs-block { padding: 0px !important; } footer.Footer .image-block { padding-bottom: 0px !important; } nav.Footer-nav { padding-top: 0px !important; padding-bottom: 0px !important; } div#footerBlocksBottom { padding-top: 0px !important; } footer.Footer .margin-wrapper { margin-bottom: 0px !important; } }  

Add to Home, Services, Contact Us Page Header
<style> button.Mobile-bar-menu:after {color: white !important;} </style>  

Try adding this to the custom css area, after any other code that may be there. Also remove your code.

 
@media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }  

Add to Design > Custom CSS
/* Homepage nav bold */ body.homepage a.Header-nav-item { font-weight: bold; }  

Yeah that happens a lot with custom code. It is the nature of the beast. The view the user will see from the outside world should always be the final word on weather an effect is working or not.

Hey @bangank36
So one of the images before the code 

 
And here's after. It really zooms in on this man's face haha

I'd like to keep the width to keep the full scope of the photos. Is that possible to do?
Thanks so much for all of your help on this!

How can I see what that looks like? Thanks!

Site URL: http://www.southernsunevents.com
@tuanphan
@bangank36
I've used the following for the image resize but now when I try to adjust the overlay text large sections get greyed out and banner images get cut/rearranged. Any ideas?
First shot attached is before and second is after trying to adjust text. 
Site: www.southernsunevents.com
Password: sse2020
Code I used for image resize...
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(1) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e61166c9f9a545c228981fa/1613063589855/82.N%26N-416_id109374907.jpg?format=2500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(1) .Index-page-image img {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(2) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601d80b87affa87cb4212442/1614193166900/Jenni+Chandler+Photog+1.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(2) .Index-page-image img {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(3) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e6116f73d879f7082676743/1609349400689/BLAIRSVILLE_GEORGIA_WEDDING_MEGAN%26KYLEDSC_7045.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(3) .Index-page-image img {
    display: none;
  }
}
 

@bangank36Works great but I want to keep my normal nav bar on the desktop version.

Hey @bangank36,
Thanks for sending this. The code completely removed my nav bar from all views. Still playing around with it over here but no luck

Hi @Ellavator
Use this code in Design -> Custom CSS
figure.Index-page-image.loaded { transform: none !important; } .Parallax-item { transform: none !important; position: absolute !important; } Please use the like button if it helps you!
Best,
Leopold

This code works for all of your index pages. If you got a problem on that let me know to check it please.
Please use the like button if it helps you!
Best,
Leopold

This is perfect. Thank you!