Header height and Header overlapping on product pic - Mobile View, Brooklyn

Hiccups
Tourist
5 0 0

Hello 

I have been working on my Brooklyn for my store which is due launch this month. 

Issues are with mobile view only (if I'm not wrong) , header height is not optimised as per mobile view and logo/icon sizes want to reduce it but all tweaking reading old threads went in vain. Attached is the screen shot of the same. 

 

20201010_201452.jpg

 

Other issue is header overlapping on product images (not on slideshow or anywhere else) , this I realised when I thought that images were getting cropped from top unless I turned on header transparency and witnessed this. 

 

20201010_201524.jpg

 

Please help. 

Thanks in advance. 

 

 

 

 

--EDITED--

 

Initially i wanted to separate header from slideshpw and few other minor tweakings , followed some threads and added following to theme.scss.liquid

@media screen and (max-width: 768px) {
.site-header .grid--table {
height: 20px;
}
}

site-header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#shopify-section-footer footer{
    padding-bottom: 0 !important;
}

.main-content + .hr--large{
    margin-top: 0px !important;
}
.section-header[class*='text'] {
    margin-top: -20px !important;
    margin-bottom: 30px !important;
0 Likes