Btukfyl

www.firstcalluplinks.com

enter image description here

The nav bar and hero image are having resizing issues on mobile. The hero image and text overlay get cut off by the navbar. The height of the navbar is causing issue - Cannot get logo to resize the way I want to in accordance with the size of the screen. I used an AMP template and customized it.

CSS:

 .cid-r3y3K9GszO amp-sidebar.open:after{content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(217, 217, 217, 10);}

 .cid-r3y3K9GszO .open{transform: translateX(0%);display: block;}

 .cid-r3y3K9GszO .builder-sidebar{background-color: #d9d9d9;position: relative;min-height: 100vh;z-index: 1030;padding: 1rem 2rem;max-width: 20rem;}

 .cid-r3y3K9GszO .headerbar{display: flex;flex-direction: column;justify-content: center;padding: .5rem 1rem;min-height: 70px;align-items: center;background: rgba(217, 217, 217, 0.8);}

 .cid-r3y3K9GszO .headerbar.sticky-nav{position: fixed;z-index: 1000;width: 100%;}

 .cid-r3y3K9GszO button.sticky-but{position: fixed;}

 .cid-r3y3K9GszO .brand{display: flex;align-items: center;align-self: flex-start;padding-right: 30px;}

 .cid-r3y3K9GszO .brand p{margin: 0;padding: 0;}

 .cid-r3y3K9GszO .brand-name{color: #ffffff;}

 .cid-r3y3K9GszO .sidebar{padding: 1rem 0;margin: 0;}

 .cid-r3y3K9GszO .sidebar > li{list-style: none;display: flex;flex-direction: column;}

 .cid-r3y3K9GszO .sidebar a{display: block;text-decoration: none;margin-bottom: 10px;}

 .cid-r3y3K9GszO .close-sidebar{width: 30px;height: 30px;position: relative;cursor: pointer;background-color: transparent;border: none;}

 .cid-r3y3K9GszO .close-sidebar:focus{outline: 2px auto #1b4376;}

 .cid-r3y3K9GszO .close-sidebar span{position: absolute;left: 0;width: 30px;height: 2px;border-right: 5px;top: 50%;background-color: #1b4376;}

 .cid-r3y3K9GszO .close-sidebar span:nth-child(1){transform: rotate(45deg);}

 .cid-r3y3K9GszO .close-sidebar span:nth-child(2){transform: rotate(-45deg);}@media (min-width: 992px){.cid-r3y3K9GszO .brand-name{min-width: 8rem;}

 .cid-r3y3K9GszO .builder-sidebar{margin-left: auto;}

 .cid-r3y3K9GszO .builder-sidebar .sidebar li{flex-direction: row;flex-wrap: wrap;}

 .cid-r3y3K9GszO .builder-sidebar .sidebar li a{padding: .5rem;margin: 0;}

 .cid-r3y3K9GszO .builder-overlay{display: none;}}

 .cid-r3y3K9GszO .hamburger

    {position: absolute;top: 25px;right: 20px;margin-left: auto;width: 5%;height: 5%;background: none;border: none;cursor: pointer;z-index: 1000;}@media (min-width: 768px)

    {.cid-r3y3K9GszO .hamburger{top: calc(0.5rem + 55 * 0.5px - 10px);}}

 .cid-r3y3K9GszO .hamburger:focus{outline: none;}

 .cid-r3y3K9GszO .hamburger span{position: absolute;right: 0;width: 65px;height: 4px;border-right: 5px;background-color: #1b4376;}

 .cid-r3y3K9GszO .hamburger span:nth-child(1){top: 0;transition: all .2s;}

 .cid-r3y3K9GszO .hamburger span:nth-child(2){top: 13px;transition: all .15s;}

 .cid-r3y3K9GszO .hamburger span:nth-child(3){top: 13px;transition: all .15s;}

 .cid-r3y3K9GszO .hamburger span:nth-child(4){top: 26px;transition: all .2s;}

 .cid-r3y3K9GszO amp-img{height: 115px;width: 215px;margin-right: 1rem;margin-left: 2rem;}@media (max-width: 215px;)

 .cid-r3y3K9GszO amp-img{max-height: 115px;max-width: 215px;}}

 .cid-r3y3K9GszO amp-img img{height: 100%;object-fit: relative;object-position: center;}