I try to make a slide card for mobile design by implement overflow-x.
However, this leaves some space on the right side of the screen which is really annoying. How can I fix this?
I have used the following style to get rid of the extra space on the right side of the screen:
Here is my html code
<div class="pet-group">
<!-- Pet List Widget -->
<div class="row justify-content-md-center text-center flex-nowrap2">
<div class="w-25 p-3" data-step="2" data-intro="You also can add your other pet!" data-position='right'
data-scrollTo='tooltip'>
<div class="card widget-profile pet-widget-profile ">
<div class="card-body card-mobile">
<div class="propet-widget-content ">
<div class="pet-info-widget ">
<a href="add-pets.html" class="booking-doc-img ">
<img src="assets/img/addpet.png " alt="users Image ">
</a>
<div class="profile-det-info ">
<h3><a href="add-pets.html " class="stretched-link ">
Add Pet </a> </h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-25 p-3" data-step="1"
data-intro="Hey, its Ricky! You can click here to view or update your pet story." data-position='left'>
<div class="card widget-profile pet-widget-profile ">
<div class="card-body card-mobile">
<div class="propet-widget-content ">
<a href="profile-pet.html" class="booking-doc-img ">
<div class="pet-info-widget ">
<img src="assets/img/pets/cat1.png " alt="users Image ">
</a>
<div class="profile-det-info ">
<h3><a href="profile-pet.html" class="stretched-link ">
Ricky </a><span class="badge badge-pill bg-success-light gender">Male</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-25 p-3">
<div class="card widget-profile pet-widget-profile ">
<div class="card-body card-mobile">
<div class="propet-widget-content">
<a href="profile-pet.html" class="booking-doc-img ">
<div class="pet-info-widget ">
<img src="assets/img/pets/cat2.png " alt="users Image ">
</a>
<div class="profile-det-info ">
<h3><a href="profile-pet.html" class="stretched-link ">
Bucky </a><span class="badge badge-pill bg-warning-light gender">Female</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my css code
.pet-group {
margin-top: -70px;
display: flex !important;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-direction: horizontal;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
.flex-nowrap2 {
padding: 15px;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
Try
.flex-nowrap2 {
padding-right: 0px;
}
inside Mobile Size Media Query.
remove padding
.flex-nowrap2 {
padding: 0;
}
If you want padding to text just add padding to title tags only.
Related
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3 " style="width: 60%;">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
I have a problem with alignment text and icon. Look at screenshot
I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.
Here I have aligned it vertically and horizontally.
.container-fluid{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 60%;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
Thanks and best regards!
I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.
Check this image
Finally I coped with that. Here is my solution:
.align-inline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title align-inline"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
This is how result looks like
Updated Position I have a problem I can't seem to centralize my contact information. Below is the code I have that pushes all the small logos with the text to the side of the webpage.
However, my final goal is to have them placed in one line. Any help is welcome!
.media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.media-body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1
}
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>+2 257 995 2885</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>
Here you are using flexbox. If you want all children to be in one line.
Just wrap around one more div to all and give it display:flex
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media-wrapper">
<div class="media contact-info"></div>
<div class="media contact-info"></div>
<div class="media contact-info"></div>
</div>
</div>
</section>
and then add following css
.media-wrapper {
display:flex;
}
https://codepen.io/ksilentstorm/pen/eYmeXvr
For knowledge purpose
Just adjust child elements by putting following lines in parent css that is .media-wrapper.
For horizontal alignment - justify-content: center/flex-start/flex-end;
For vertical alignment align-items: center/flex-start/flex-end;
For direction flex-direction: row or flex-direction: column
Note: When direction changes justify-content and align-items both exchange its nature.
For more info. you can visit.
https://www.w3schools.com/css/css3_flexbox.asp
Try this
.media {
/* display: -webkit-box; */
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
float: left;
text-align: center;
margin: 0 17px;
}
.media-body {
width: 100%;
}
<section class="contact-section">
<div class="col-lg-3 offset-lg-1">
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>+2 257 995 2885</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="media contact-info">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>
Restructured your HTML code and styled using flex.Hope this helps you.
<section>
<div class="contact-section">
<div class="address">
<span class="contact-info__icon"><i class="ti-home"></i></span>
<div class="media-body">
<h3>Buttonwood, California.</h3>
<p>Rosewoodly, PA 750918</p>
</div>
</div>
<div class="contactInfo">
<span class="contact-info__icon"><i class="ti-tablet"></i></span>
<div class="media-body">
<h3>+2 257 995 2885</h3>
<p>Mon to Fri 7am to 6pm</p>
</div>
</div>
<div class="email">
<span class="contact-info__icon"><i class="ti-email"></i></span>
<div class="media-body">
<h3>support#testemail.com</h3>
<p>Send us a message anytime!</p>
</div>
</div>
</div>
Css change
.contact-section{ display:flex;}
I need a vertical divider and the text to line up exactly like this on the top right hand corner of my screen.
I am having some trouble even getting the divider to show and the text to pull right
<div class="row">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
Css
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}
I can see that bootstrap 4 tag is added to your question. If you are using bootstrap 4, there is a in-built flex utility https://getbootstrap.com/docs/4.0/utilities/flex/
<div class="d-flex flex-row justify-content-end">
<div class="">
<span>Profile & Settings</span>
</div>
<div class="mx-2">|</div>
<div class="">
<span>Logout</span>
</div>
</div>
JS Fiddle: https://jsfiddle.net/8p27xwcs/
use "container" instead of "row", or set display:inline or block on the row div.
<div class="row" style="display:inline;" >
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
</div>
or
<div class="container">
<div class="float-right">
<span>Profile & Settings</span>
</div>
<div class="float-right sep">
<div class="septText"></div>
</div>
<div class="float-right">
<span>Logout</span>
</div>
I try to reach one point using div's and bootstrap. It should be in one line number of points and smaller information about points and in second area should be bootstrap icon and again information about icon.
My code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block">
<div class="col-md-5" style="padding: 0px; padding-left: 10px; ">
<i class="pull-left h2"><h2>72</h2></i> TWOJE PUNKTY
</div>
<div class="col-md-7" style="padding: 0px">
<i class="fa fa-trophy fa-2x pull-left"></i> WYRÓZNIENIE SZYBKI BILL
</div>
<br>
<table class="table">
<tr>
<th><h2>72</h2></th>
<th>you points</th>
<th><i class="fa fa-trophy fa-2x pull-left"></i></th>
<th>fastL</th>
</tr>
</table>
</div>
</div>
Try below code and you can adjust col- class according to you
.flex-div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.icon-text {
float: left;
margin-right: 10px;
font-size: 34px;
}
.icon-text h2 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row center-block row-eq-height">
<div class="col-xs-6 flex-div">
<div class="icon-text">
<h2>72</h2>
</div>
<div class="info-text">
TWOJE PUNKTY<br/>
WYRÓZNIENIE SZYBKI BILL
</div>
</div>
<div class="col-xs-6 flex-div ">
<div class="icon-text">
<i class="glyphicon glyphicon-certificate"></i>
</div>
<div class="info-text">
Your Achivement Reached
</div>
</div>
</div>
</div>
You can achieve that effect using something like this.
HTML:
<div class="points"> 72 </div>
<div class="points-details">
Your
points
</div>
<div class="icon">+</div>
<div class="icon-details">
Your
Achievment
Reached
</div>
CSS:
.points{
display: inline-block;
}
.points-details{
display: inline-block;
}
.icon{
margin-left: 20px;
display: inline-block;
}
.icon-details{
display: inline-block;
}
My page has 3 div(s) within a div. In tablet and desktop screens they look good (center-aligned), but on a very small device such as cellphone the inner div(s) are left aligned (I want them to be horizontally center aligned). I applied text-center, and center-block to the outer div but it does not work. Any suggestion? Here are the html, and css codes.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
portfolio-caption {
max-width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
}
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div style="max-width: 281px">
<a href="#" ">
<img src="./x/pilotproject1.jpg " class="img-responsive " style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# ">
<img src="./x/pilotproject2.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# " class="pilot-link ">
<img src="./x/pilotproject3.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
The reason that I have is that the width of the pictures is 281 px, if I do not set the width, the width of the div that comes after the img will be bigger than 281 px which is not something that I want.
as you can see in this picture, the images are all left-aligned
I added a class centered as a container to center elements (please remove the border border: 1px solid red; it is used to show you the container block ):
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid red;
}
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
wrap each element you want to be centered.
Also in your css portfolio-caption should be .portfolio-caption to select a class.
I moved your in-line style to css class img-responsive so you can update your style in one place.
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
.portfolio-caption {
width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
float: right;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* border: 1px solid red; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="#">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# " class="pilot-link ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
You should not apply classes to outer divs, apply them exactly to what you want to be centered : class="img-responsive center-block", and
also check the bootstrap version center-block is new in Bootstrap version 3.0.1 i believe.
Use
Text align : center ;
text-align:center
<div style="max-width: 281px; text-align : center">
Plunker link :
https://plnkr.co/edit/UaW436KiylzfqOCU1cg1?p=preview