I have difficulties to add border to the last class="separator" from the last class="list-group".
I want to do this in SASS. Can someone please help me, because my solution doesn't work.
HTML
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator"></div>
</div>
CSS
.list-group {
&:last-child .separator {
border-left: 1px solid black;
}
}
According to me there is no problem in your sass code. Just add some content into html and the browser will start showing border. Something like this
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item1</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item2</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item3</div>
</div>
<div class="list-group">
<div class="list-group-item"></div>
<div class="separator">item4</div>
</div>
Output (for your reference):
can you spot the left border on item4?
This worked for me.
I know it's too late xd
.list-group {
.separator:last-child {
border-left: 1px solid black;
}
}
Related
In this code i am preparing a portfolio, now when i am placing an
image in my portfolio the image is not filling the border div and
going a side as you can see in the picture <IMAGE-first half> , <IMAGE-second half>. Can someone help me to keep four images that has borders only to the image and I need all four images placed like four boxes?
<section class="latestwork" id="work">
<div class="container">
<div class="row">
<div class="heading">
<h2 class="boxx">My Latest Work</h2>
<h6>These are my latest mobile photography captures</h6>
</div>
</div>
<div class="row">
<div class="myworkbuttons">
<button type="button" class="myworklink" data-filter="all">All</button>
<button type="button" class="myworklink" data-filter="creative">Creative</button>
<button type="button" class="myworklink" data-filter="black&white">Black/white</button>
<button type="button" class="myworklink" data-filter="portrait">Portraits</button>
</div>
</div>
<div class="row">
<div class="portfolio-items" data-category="urban-floods">
<div class="portfolio-inner-item" style="">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\The Disaster of 2020.jpg" alt="Image not loading">
</div>
</div>
<div class="portfolio-info">
<h4>Iso: </h4>
</div>
</div>
<div class="portfolio-items" data-category="buffalo">
<div class="portfolio-inner-item">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\buffalos path.jpg" style="float: left;" alt="Image not loading">
</div>
</div>
</div>
</div>
This is happening because the size of the image is not big enough.
Try adding width: 100% of the image component.
you can use grid and and use css importing file and try this code: .div{background-image: url("/assets/pics/picture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height:50vh; min-width:50vw }//(or what size do you need.);
My code:
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
How can I properly display my images as a 3 column grid?
<section id="work-a" class="text-center py-3">
<div class="container">
<h2 class="section-title">My Work</h2>
<div class="bottom-line"></div>
<p class="lead">
Check out some of my projects
</p>
<div class="items">
<div class="item">
<div class="item-image">
<img src="img/items/item1.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item2.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/items/item3.png" alt="">
</div>
<div class="item-text">
<div class="item-text-wrap">
<p class="item-text-category">Design</p>
<h2 class="item-text-title">Great Gradients</h2>
</div>
</div>
</div>
</div>
</div>
</section>
I have made the following grid in Bootstrap 4:
<div class="container-fluid">
<div class="row padding">
<div id="workshop1" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt="">
</div>
<div class="col-lg-6">
<div class="row">
<div id="workshop2" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop3" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
<div class="row">
<div id="workshop4" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop5" class="col-lg-6 nopadding">
<img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt="">
</div>
</div>
</div>
</div> <!-- end of first row -->
<div class="row padding">
<div id="workshop6" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop7" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop8" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt="">
</div>
<div id="workshop9" class="col-lg-3 nopadding">
<img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt="">
</div>
</div> <!-- end of second row -->
</div>
The css file looks like this:
.nopadding {
padding-left: 0;
padding-right: 0;
}
Now I have the problem, that there is a small white line between the right part of row 2 and row 3 in Safari and Chrome on my Mac. In Firefox everything looks fine:
Firefox
Chrome & Safari
Does anybody have an idea how fix this? All browsers are up to date.
Thanks in advance.
Regards
Lars
Try adding display: block; to your images or float: left;
Sometimes trying font-size: 0; or line-height: 0; works.
The page that Im trying to scrape looks like the code below.
Based on text scraped and verified from one DIV, I need to scrape value from following DIV.
I have the right XPath to get the DIV that I need to verify, however, I cannot figure out how to get the text from the adjacent DIV?
<h3>TableWithColumnsAndRowsDIVstyle</h3>
<div class="row row-flex rowLine" style="padding: 2px 0;">
<div class="col-1 vcenter">
::before
<h4 style="white-space: nowrap;">
RowValueNameX
</h4>
</div>
<div class="col-2 vcenter text-right">
::before
<h4>
<b>RowValueX_ThatINeedToExtract</b>
</h4>
</div>
::after
</div>
<div class="row row-flex rowLine" style="padding: 2px 0;">
<div class="col-1 vcenter">
::before
<h4 style="white-space: nowrap;">
RowValueNameY
</h4>
</div>
<div class="col-2 vcenter text-right">
::before
<h4>
<b>RowValueY_ThatINeedToExtract</b>
</h4>
</div>
::after
</div>
<div class="row row-flex rowLine" style="padding: 2px 0;">
<div class="col-1 vcenter">
::before
<h4 style="white-space: nowrap;">
RowValueNameZ
</h4>
</div>
<div class="col-2 vcenter text-right">
::before
<h4>
<b>RowValueZ_ThatINeedToExtract</b>
</h4>
</div>
::after
</div>
The XPath that I have looks like this
//*[contains(normalize-space(text()),"RowValueNameX")]
Now I need to get this text
RowValueX_ThatINeedToExtract
To select the first divblock containing the text are looking for, you can use:
//div[contains(div, "RowValueNameX")]
This gives:
<div class="row row-flex rowLine" style="padding: 2px 0;">
<div class="col-1 vcenter">
::before
<h4 style="white-space: nowrap;">
RowValueNameX
</h4>
</div>
<div class="col-2 vcenter text-right">
::before
<h4>
<b>RowValueX_ThatINeedToExtract</b>
</h4>
</div>
::after
</div>
You want the second div child, so the complete XPath looks like this:
//div[contains(div, "RowValueNameX")]/div[2]
This results in:
<div class="col-2 vcenter text-right">
::before
<h4>
<b>RowValueX_ThatINeedToExtract</b>
</h4>
</div>
From here it should be easy to get to the text you actually want.
I built this mock-up:
I was wondering if this type of gallery is possible to build with bootstrap, I did not start to code yet because I think that it will not work because of the rows.
I would like some second opinions, from people who have worked with bootstrap for longer than me.
I found something that actualy works!! and it's responsive! :D
.poligono, .poligono div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.poligono {
transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
width: 100%;
height: auto;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.poligono:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>Projects</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
<p class="descricao">Cenas maradas acontecem</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/>
</div>
</div>
</div>
</div>
</div>
</div>
If you are asking if there is a default bootstrap for this the answer is no.
But yes this is possible with your own css.
I don't see why not you could not skew the image with something like the following:
img.tilted{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
If you want this "mask like behaviour" i don't see why you couldn't put all the images on a layer bellow and put a transparent image on the top
Or you can try to css clip it like this http://www.html5rocks.com/en/tutorials/masking/adobe/