• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Why is my CSS rule not being overridden?

Participant ,
Oct 09, 2021 Oct 09, 2021

Copy link to clipboard

Copied

please look at http://v60.ancestry.higgsy.co.uk/higgs_harry_b1915.html

This image is too large in Desktop view:

archive/721_1950_18_Kirk_Street_Harry_and_Kit.jpg

 

721_1950_18_Kirk_Street_Harry_and_Kit.JPG

 

Can anyone explain why the rule .resp_image in global.css  is NOT being overridden by the same rule which is in test.css i.e. I want the one in test.css to be active to make the image smaller

Views

171

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 09, 2021 Oct 09, 2021

Global CSS contains these image styles in this stacking order:

========

.resp_image {
width: 100%;
max-width: 100%;
}
img {
display: block;
max-width: 800px;
margin-left: auto;
margin-right: auto;
width: 100%;

}

Due to stacking order,  img tag (width:100%) takes priority over other styles. 

 

In CSS hierarchy, tags take priority over #IDs and .classes.

 

Hope that helps.

 

 

 

Votes

Translate

Translate
Community Expert ,
Oct 09, 2021 Oct 09, 2021

Copy link to clipboard

Copied

Global CSS contains these image styles in this stacking order:

========

.resp_image {
width: 100%;
max-width: 100%;
}
img {
display: block;
max-width: 800px;
margin-left: auto;
margin-right: auto;
width: 100%;

}

Due to stacking order,  img tag (width:100%) takes priority over other styles. 

 

In CSS hierarchy, tags take priority over #IDs and .classes.

 

Hope that helps.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Oct 10, 2021 Oct 10, 2021

Copy link to clipboard

Copied

LATEST

Many thanks Nancy, I just removed my resp_image class and all looks good.  Now you mention it, I do recall reading about the tag selector taking priority but I think I hardly use them so have fallen into that trap! Your help is much appreciated.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines