How to center profile image depending of screen size using bootstrap?
Here what I have done so far:
html:
<div class="col-md-12">
<div class="col-md-2 col-xs-12">
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">
</div>
<div class="title-users-list-profile">
<img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
</div>
</div>
</div>
CSS:
.deck{
display: flex;
}
.comments-author {
border-radius: 50%;
border: 6px solid #fff;
margin: 5px;
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
.title-users-list-profile img{
position: relative;
width: 50px;
height: 50px;
top: -35px;
left:50px;
margin-top: 8px;
margin-bottom: -25px;
}
https://jsfiddle.net/tzc2gdcf/
You can use flex box to align image.
Check this guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and using #media to specific rules to single media size
If you are only wanting to have the image center based the current dimension you could look at adding a media query. Will change css rules based on pixel width/etc. https://getbootstrap.com/docs/3.3/css/
Related
I have a problem with the size of the cards. On the Desktop side are ok, but on a lower resolution begin to be no longer equal. How should I proceed in this situation? I'm not an expert in css, I work on the backend but I would like in the future to have a correct solution how I could solve something like.
html
<div class="proditem">
%PROMO%
<div class="proditem_cover">
%COVER%
%promo_period%
</div>
<h3 class="protitem_title">
%TITLE%
</h3>
<div class="protitem_price">
%PRICE% eur %price_euro%
</div>
<div class="detalils"><a class="button1" href="%LINK%">Details</a></div>
</div>
a {
text-decoration: none;
color: inherit;
font-size:16px;}
.list_prod .proditem {
height: auto;
max-height: initial;
float: none;
display: inline-block;
margin-bottom: 10px;
vertical-align: top;
transition: 0.3s;
width: 40%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 2px 16px;
border: 0 !important;
border-radius: 1rem;
.proditem img {
width: 170px;
height: 170px;
max-width: 10vw;
max-height: 10vw;
/* object-fit: cover; */
}
image
As far as I can see, they decrease in size because they don't have the same information, depending on the text and image if they're not equal. How can I make them equal regardless of the information they have?
Maybe you can try to create wrapper class like :
<div style="width:100%; height:auto; display:flex; justify-content:flex-start;" class="wrapper">
<div style="width:50%; height:100%; " class="content"> <div/>
<div style="width:50%; height:100%; class="content"> <div/>
<div/>
This just a simple example to give you a some styling or aligning tricks. Try and write me if its not-proper code for you.
I want to put 2 images on the same row, with size adaptation when I increase/decrease the page size, without have the image move to the other row.
Currently when my page is sized down, my second image (black block on the description) moves to the other row
Here is an screenshot of what I'm trying to do:
CSS:
.album {
margin-top: 10px;
width: 100%;
display: block;
width: auto;
height: auto;
}
.album img {
padding: 10px;
}
And my html part:
<div class="row">
<div class="album">
<img src="images/album2017.png">
<img src="images/album2016.png">
</div>
I hope you can help me,
Thanks in advance :)
You just need to use sm breakpoint FIDDLE
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/350x150">
</div>
<div class="col-sm-4">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
.album {
margin-top: 10px;
width: 100%;
display: block;
height:auto;
width:auto;
}
.album img {
padding: 10px;
width:50%;
height :auto;
}
Hope this is what you are looking for. Adjust your width % to scale according to your screen size / block size
JSFIDDLE
I hope it's should work
.album {
margin-top: 10px;
width: 100%;
display: block;
width: auto;
height: auto;
}
.album img {
width: 50%;
padding: 10px;
}
I want create this.
What I have so far is this, but it is not responsive as screen size changes. It stays on specific width, that is why i am thinking to replace this with image
<div class="container-fluid">
<div class="betn-footer">
</div>
</div>
.betn-footer{
background-color:#f4f3f3;
height:50px;
text-align:center;
position:absolute;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
margin-top:-20px;
margin-left:65px;
width:973.88px;
box-shadow: 0 21px 30px -10px #080808;
}
Tell me if there is any other option to do this. Thank you!
Just remove your fixed widths and margins:
.container-fluid { margin-bottom: 2em; }
.betn-footer {
background-color: #f4f3f3;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: 0 21px 30px -10px #080808;
}
<div class="container-fluid" style="width:200px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:500px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:1000px;">
<div class="betn-footer"></div>
</div>
You should not use margin-left and instead center the footer / your content with margin: 0 auto. Then you can set your footer width to a flexible width via using %
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
it will always display a picture in the center of the page.
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
I realize there is another thread that addresses this issue, but I'm having trouble implementing some of the suggestions to my particular situation. As of now I'm kind of experimenting but would appreciate any suggestions. Here is a screenshot of the portrait that I want cropped in a circle: http://imgur.com/autCwaj
Although I may be way off course, my code is as follows--
The HTML:
<section class="hero">
<div class="content">
<div class="image-cropper">
<img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me">
</div>
<p class="iama">My name is...</p>
<p class="my-name my-info">Jason Brain</p>
<p class="iama">I want to be (eventually)...</p>
<p class="my-info">A front end, full stack, and iOS developer</p>
</div>
</section>
The CSS:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
}
.my-picture {
display: block;
margin: 0 auto;
height: 100%;
width: auto;
border: 2px solid white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Thanks for your assistance everyone.
If you want a circle instead of an oval, you'll need to rearrange some CSS. The outer div needs to be square and the image needs to stretch the small of its two dimensions to 100% of the otter div.
.image-cropper {
width: 100px;
height: 100px;
position: relative;
border: 2px solid white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
overflow:hidden;
}
.my-picture {
display: block;
margin: 0 auto;
height: auto;
width: 100%;
}
<section class="hero">
<div class="content">
<div class="image-cropper">
<img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me"/>
</div>
<p class="iama">My name is...</p>
<p class="my-name my-info">Jason Brain</p>
<p class="iama">I want to be (eventually)...</p>
<p class="my-info">A front end, full stack, and iOS developer</p>
</div>
</section>