css - Access inner html tag -
css - Access inner html tag -
i got same front end end works need apply bootstrap. unfortunately, i'm not much front end end developer :p. anyway, here face problem described bellow:
my html:
<div class="container-fluid hidden-xs"> <div class="row"> <div class="col-xm-12 visible-xs hidden-sm hidden-md"> <a href="~/techroom/information?eventname=glassware"> <p class=" competencyuserstory" style="height:222px; width:110%;"> <img src="~/images/techroom/google-glass.jpg" style="height:222px; width: 107.6%; margin-left:-15px;" /> </p> </a> </div> <div class="col-md-4 hidden-sm hidden-xs"> <a href="~/techroom/information?eventname=glassware"> <p class=" competencyuserstory"> <img src="/images/techroom/google-glass.jpg" style="height:304px; width: 104.3%; margin-left:-15px;" /> </p> </a> </div> <div class="col-sm-6 visible-sm hidden-md hidden-xs"> <a href="~/techroom/information?eventname=glassware"> <p class=" competencyuserstory"> <img src="/images/techroom/google-glass.jpg" style="height:304px; width: 104.4%; margin-left:-15px;" /> </p> </a> </div> </div> </div>
my css:
.competencyuserstory { background: rgba(7, 6, 6, 0.0980392); display: inline-block; cursor: pointer; text-overflow: ellipsis; overflow-y: hidden; transition: background 0.2s ease-in-out 0s; width: 90%; height: 304px; }
here have used same html thrice sake of setting image size in different screen size. , have used inline css.
now want improve here ride of such inline css(without putting inline css classes) , not writing same html thrice different screen size sake of image. please provide me help create improvement.
how can access img
tag apply different css, example
.col-sm-6 col-md-4 hidden-xs > > p > img {height:304px; width:100%;}
not work.
you there. missed img element in css.
use ".competencyuserstory img
" instead of ".competencyuserstory
"
try below code.
.competencyuserstory img { background: rgba(7, 6, 6, 0.0980392); display: inline-block; cursor: pointer; text-overflow: ellipsis; overflow-y: hidden; transition: background 0.2s ease-in-out 0s; width: 90%; height: 304px; }
css html5 twitter-bootstrap
Comments
Post a Comment