I am having an issue on smaller desktop only breakpoints say 1366 resolution. My logo in the center of the header which is hyperlinked to the home page gets cut off like the below picture.
The below picture is a screen shot of my master page work space with the .png in question about getting cut off. The link to the website is www.downtownsp.net if you want to try it out for yourself and see the problem live.
Any help would be much appreciated as this is my first web design project for my full time employer.
Pin your logo to the top center and remove responsive width and height, set that to none.
give it a shot.
Trying it now.
No luck on that fix unfortunately. I'm still trying to figure out what's causing it.
Something is overlapping your header elements.
I guess the fluid design is set very strange as all elements behave differently and content is not responsive at the moment:
fotoroeder I have moved the logo to the very front of the top most layer so nothing can be overlapping it? I also mistook it for a .PNG and it is actually .SVG could the fact that it's a scaleable vector graphic have anything to do with it?
You should not use system fonts in your menu. It behaves like an image in this case. Images scale differently than text.
This leads to unintended scaling.
Your menu buttons had a colour fill, that´s why this overlapping happens to your header elements.
I changed some settings and show, how it could be done. I recommend to use breakpoints, especially on master pages, only if the design needs one. Of course you have to change the font to your needs but use a webfont, please. I used BEBAS NEUE.
I did take less care of your footer.
Thanks so much for the advice! Checking out the file you changed around now.