Jump to content

Custom css code when in landscape mode shifts images to the left.

Recommended Posts

Site URL: https://zedfactorfellowship.org/

I'm currently having problems with mobile viewing for my website. The issue is viewing the website in landscape shifts the website images leftward and the nav menu also disappear when in landscape mode. I have provided the screenshots of the issues below and all the custom code I have written for the site. 

 

@media screen and (max-width:767px) {
[data-section-id="5fb32dcd64513a6739b5718e"] {
    min-height: 37vh !important;
  	height: 30vh !important;

}
}

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 50%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}


html {
scroll-behavior: smooth;
}



//Stylized Folder Dropdown Menu
@linkBGColor: #B10038;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0!important;
  .header-nav-folder-item {
    padding: .5em 1em!important;
  }
  .header-nav-folder-item:hover {
    background: @linkBGColor!important;
    a {
      color: @linkTextColor!important;
    }
  }
}

 

IMG_3404.PNG

IMG_3402.PNG

IMG_3403.PNG

Link to comment
  • Replies 1
  • Views 552
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.