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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -