CMS Development

Jlawal
Top Contributor

Stylesheet clash

Hello all,

 

A stylesheet i have used has stopped pulling styling to the pages i am working on.

The video below is an example of some of the elements that are ignoring the code applied.

 

hs - g (1).gif

 

I think that the code is clashing with something, but i'm not sure what.

 

Any advice on what to do will be greatly appreciated as i don't have the foggiest at the moment.

 

Some examples of some elements used are:

 

'section-header'

@media screen and (max-width:768px) {

.section-header {
padding-top: 40px;
padding-bottom: 30px;
}

}

 

 @media screen and (min-width:768px) {

.section-header {
padding-top: 100px;
padding-bottom: 60px;
}

}

and 'using-xpressions'

 

 @media screen and (min-width:768px) {

.using-xpressions {
padding-top: 20px!important;
}

}

@media screen and (max-width:768px) {
.using-xpressions {
padding-top: 80px;

}

}

0 Upvotes
3 Replies 3
dennisedson
HubSpot Product Team
HubSpot Product Team

Stylesheet clash

a:  thanks for the gif.  good way of showing issue

b:  could you provide a link so we can see the issue first hand?

 

 

0 Upvotes
Jlawal
Top Contributor

Stylesheet clash

Hi @dennisedson,

 

Thanks for getting back to me!

 

You can see the page here. The gif is mobile, but the issues are the same on desktop too.

 

Best,

Jamila

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Stylesheet clash

@Jlawal, With these specific issues, i do not see one stylesheet overwriting another.

 

for the section headers you have padding when at 768px or above and none below

@media screen and (min-width: 768px)
.section-header {
    padding-top: 100px;
    padding-bottom: 60px;
 }
}

if you want that same amount on mobile, remove the media query.  if you would like a different amount on mobile, i would change the css to something like this

.section-header {
    padding-top: 100px;
    padding-bottom: 60px;
}
@media screen and (max-width: 767px)
  .section-header {
      padding-top: 50px;  /*replace with whatever px value you want */
      padding-bottom: 30px;  /*replace with whatever px value you want */
  }
}

for the images and other items, it looks like they dont have any padding.  You will want to add to that mobile media query some styles for them.  if you want them all the same, you could add a class to each of those elements like "m-padding30" and write you code like this

@media screen and (max-width: 767px)
  .section-header {
      padding-top: 50px; 
      padding-bottom: 30px;*/
  }
  .m-padding30{
    padding: 30px 0
 }
}

that will add 30px of padding on top and bottom of the element with that class.  

 

hope that gets you somewhere!

 

 

0 Upvotes