Then we have a media query for a medium screen size (desktop), see below, where the logo is moved slightly more to the left, however it is not kicking in:
I don't know what is causing this issues, I hope you can help? I tried to call the support line, they didn't know what to do either. Also, I tried to upload some screen shots here, but it didn't let me (it didn't work).. but here is a link to one of the pages where the logo looks good on wide screen but bad on desktop: https://resource.cobalt.io/nuna-drives-security-innovation-with-crowdsourced-pen-testing
As discussed, you have one, or even several, errors in your css document. This is blocking the css below the errors to not work. This is why your media queries aren't taking effect. Your options:
1. crawl through your css and find the errors. Your stylesheet is several thousand lines long so it will take some time.
2. Create an overwrite style sheet, placing it below all other stylesheets. Overwrite the theme styles in this sheet. You will need to add this to each template that is in use that you would like your changes to be applied to.
As discussed, you have one, or even several, errors in your css document. This is blocking the css below the errors to not work. This is why your media queries aren't taking effect. Your options:
1. crawl through your css and find the errors. Your stylesheet is several thousand lines long so it will take some time.
2. Create an overwrite style sheet, placing it below all other stylesheets. Overwrite the theme styles in this sheet. You will need to add this to each template that is in use that you would like your changes to be applied to.
Why are you using positioning on an for this? It seams like you could simply place these elements inline...
either way it is probably not worth the time to change for you at this point. I checked your page and one thing I noticed is that your media query isn't taking effect at the designated width. The logo is staying at 47% from the left.
If your media query was in effect, you would want to go to about 52% from the left at 970px wide.
Everything was built for us by Hubspot, so to be honest, I find it a bit difficult to make big changes in the code as it is a bit confusing to me, also I'm not very interested in that. The whole point of using Hubspot was that it should be easy 🙂 It used to work, but we recently changed the links in the header, which then affected the logo. I tried to do an easy fix with adding different left position percentages for the different screen widths, but since it isn't working, I called the support line because I thought that they would fix it, but they couldn't either, and referred me to this place 🙂 So it would be awesome if you could do something about it? 🙂
I use a plug in on chrome called Magic CSS that allows me to edit css on a page live, but like the inspector the changes are superficial. try adding this code to the bottom of your stylesheet ColbaltJan2017-style.css.
You want to make sure your media queries are below the styles that they are overwriting. Adding it at the bottom ensures that it is below everything so there are no conflicts. Let me know if that works.
Our media queries are already in the bottom of the document 🙂 I tried to add your code, which is very similar to code we already have, but it is still not kicking in 😞 There must be something overwriting it, but when I didn't write the code myself and the code in the css sheet is quite long and confusing, it is a bit difficult for me to fix. If you have access to the css sheet, can you maybe try to figure out what is overwriting it? If it helps I'm glad to hop on a video call if it makes everything easier?
