CMS Development

Hawk-Steve
Top Contributor

Odd media query styling?

SOLVE

Hey all

 

I'm just going through the process of designing our new blog website, using the PSDtoHubspot template on the marketplace. I have moved our header global module group over to the blog template and did my best at bringing over the styles/classes too which has been pretty successful. I just seem to be having an issue with a media query.

 

If you take a look at one of our regular LP templates with a width under 768px you can see the header and logo shrinks down fine.

 

Now compare it to our new blog template with the same header (again viewing it under 768px) blog.hawktraining.com. You can see it leaves a while space below the icons and the logo looks odd.

 

Capture.PNG

 

Unchecking padding: 15px; under .header-container .hs_cos_wrapper_type_logo seems to resolve the issue.

 

I would expect using the following would work fine but it does not (I have tried using !important as well to no avail)

@media (min-width: 768px) {
    .header-container .hs_cos_wrapper_type_logo {
        padding: 0;
    }
}

I can also see existing media queries which would contradict what I am trying to do so I am at a bit of a loss.

@media (min-width: 768px) {
    .header-container .hs_cos_wrapper_type_logo {
        padding: 10px 15px;
    }
    .header-container .hs_cos_wrapper_type_logo a img {
        height: 50px;
    }
    .header-container.sticky .hs_cos_wrapper_type_logo a img {
        height: 50px;
    }
}

If anyone could help me work out this last little bit I would be very grateful! Smiley Happy

 

Steve

0 Upvotes
1 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Odd media query styling?

SOLVE

@Hawk-Steve

change min to max and set it to 767px

@media (max-width: 767px) {
    .header-container .hs_cos_wrapper_type_logo {
        padding: 0;
    }
}

View solution in original post

3 Replies 3
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Odd media query styling?

SOLVE

@Hawk-Steve

change min to max and set it to 767px

@media (max-width: 767px) {
    .header-container .hs_cos_wrapper_type_logo {
        padding: 0;
    }
}
Hawk-Steve
Top Contributor

Odd media query styling?

SOLVE

 @dennisedson

 

You know...I had tried this before and must have missed a bracket or something as the results were vastly different!

 

Copied and pasted over from your post instead and it worked out.

 

Now I just feel silly, thanks for the help! Smiley Happy

 

Steve

0 Upvotes
Adesignl
Top Contributor | Partner
Top Contributor | Partner

Odd media query styling?

SOLVE

Are you still in need of help?

0 Upvotes