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

75

Likes

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

Adobe Community Professional , 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.

 

 

 

Likes

Translate

Translate
Adobe Community Professional ,
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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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.

Likes

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