On my personal page i have a section with Skills, showing how much i know each programing language (i do not think it is accurate but whatever). I can seem to set width on the Skill grid to behave as all the other grids.
This is how it looks:
This is what i need it to look like (except with the skills instead of email):
Here you can access the code:
https://codepen.io/wodosharlatan/pen/OJwQNLL
I solved the contact section by using grid-column: span 2;, but it does not work for this section, i also tried setting the grid width to 100% but it did not do anything
Any help or ideas are appreciated, if you need more code drop me a comment
You are setting grid with two columns instead of one for "medium devices".
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: repeat(2, 1fr);
}
replace it in your media query for medium sized devices with:
.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
grid-template-columns: 1fr;
}
Keep in mind these are combined selectors, so it will change styles for others containers also, but I hope you want to achieve full width for medium sized devices anyway.
P.S.
grid-template-columns: repeat(2, 1fr);
just creates two equal columns and repeat function translates to:
grid-template-columns: 1fr 1fr;
Also don't forget to cleanup spanning column code :-)
It seems the skills__container has an extra wrapping layer inside for the content, and might not actually apply the layout to its content.
Forked demo with modification: codepen
Try remove the extra wrapping layer:
<div class="skills__container container grid">
<!-- Removed extra wrapper 👉 <div> -->
<!--==================== SKILLS 1 ====================-->
<div class="skills__content skills__open">
<div class="skills__header">
<i class="uil uil-brackets-curly skills__icon"></i>
<div>
<h1 class="skills__title">Frontend development</h1>
<span class="skills__subtitle">More than a year</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">CSS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__css"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">HTML</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__html"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">JavaScript</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__js"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 2 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-database skills__icon"></i>
<div>
<h1 class="skills__title">Backend development</h1>
<span class="skills__subtitle">Around 3 months</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">PHP</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__php"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">NODE JS</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__node"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">SQL</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__sql"></span>
</div>
</div>
</div>
</div>
<!--==================== SKILLS 3 ====================-->
<div class="skills__content skills__close">
<div class="skills__header">
<i class="uil uil-code-branch skills__icon"></i>
<div>
<h1 class="skills__title">Miscellaneous Skills</h1>
<span class="skills__subtitle">Time varies by skill</span>
</div>
<i class="uil uil-angle-down skills__arrow"></i>
</div>
<div class="skills__list grid">
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">GIT</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__git"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">Bash</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__bash"></span>
</div>
</div>
<div class="skills__data">
<div class="skills__titles">
<h3 class="skills__name">C#</h3>
</div>
<div class="skills__bar">
<span class="skills__percentage skills__c-sharp"></span>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
Related
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
I have a page having a carousel implemented using slick-carousel and jquery but I'm building this page in vue. Everything else works while migrating this carousel from jquery to vue except for the image itself which doesn't show up. I've been hacking at this for about three hours with no luck.
Heres the code for the carousel:
Jquery:
<div class=" petmark-slick-slider home-slider" data-slick-setting='{
"autoplay": true,
"autoplaySpeed": 8000,
"slidesToShow": 1,
"dots": true
}'>
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</div>
Vue:
In template
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</VueSlickCarousel>
In script
import VueSlickCarousel from 'vue-slick-carousel'
export default {
name: 'Home',
components: { VueSlickCarousel }
}
Any idea what I did wrong?
I found another question that solved this. Basically just change the code as follows:
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
I have multiple divs in a row. I want to set height dynamically to each div based on the highest content in div. Height should be equal to all divs.
Can you all please help me to solve this with javascript/jquery?
Below is the code:
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</div>
You don't actually need javascript. You can use flexbox.
.flex-container {
display: flex;
flex-direction: row;
}
.table-cellprop {
flex: 1;
overflow: auto;
}
.table-cellprop:nth-child(1) {
background-color: #b9f6ca;
}
.table-cellprop:nth-child(2) {
background-color: #84ffff;
}
.table-cellprop:nth-child(3) {
background-color: #b388ff;
}
<div class="flex-container">
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</div>
</div>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.