I have the following issue. Based on resulotion, basically for mobile view i want still to have 4 divs but i want them 40% of viewport, so i will have 2 and a half div visible and 1 and a half should be overflown with scroll available.
i tried something like this:
#bsp-content {
width: 100%;
display: table;
padding-bottom: 15px;
#media all and (max-width: $mobile_breakpoint){
overflow-x: auto;
}
.bsp-container:last-child {
#include set_solid_border(0,$acc_grey,right);
}
.bsp-container {
width: 25%;
display: table-cell;
text-align: center;
#include set_solid_border(1,$acc_grey,right);
> div {
padding-left: 15px;
padding-right: 15px;
}
#media all and (max-width: $mobile_breakpoint) {
width: 40%;
}
}
where content is actually viewport and container is div (there are 4 of them).
Can anybody give me a hint please?
Note: I dont want to use javascript to recalculate viewport, and also i dont want to have them fixed width.
Thanks in advance.
UPDATE - html part
<div id="bsp-content" ">
<div class="bsp-container">
<img src="img1"/>
<div>text1</div>
</div>
<div class="bsp-container">
<img src="img2"/>
<div>text2</div>
</div>
<div class="bsp-container">
<img src="img3"/>
<div>text3</div>
</div>
<div class="bsp-container">
<img src="img4"/>
<div>text4</div>
</div>
</div>
You should use width: 40vw; instead of width: 40%;.
Related
I have created a showcase section where in I have used flexbox to align images to the right. However when I shrink the size of the window, the images go out of the window. I am looking for something like this: http://jsfiddle.net/xLc2Le0k/15/
Here is the snippet for HTML:
<div class="showcase shadow">
<div id="places">
<p class="category">Places</p>
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
Here is the snippet for SCSS:
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
}
}
}
Here is the link for the live web page: https://swizzx.github.io/Photography-Portfolio/
Just a heads up, I have tried setting the width of the parent and the element to 100%, when I do so, it shrinks but does not work as how I want it to like in the JSFiddle provided above. On the contrary setting the width to 100% makes the first image equal to the size of the others which I don't want.
You should add below css property to the flex container. It wraps elements automatically to the next line when you shrink the window.
flex-wrap: wrap;
One thing you are missing in your code is applying 100% width to your img tag. Give img 100% width and it will work the same way you want.
#places div img {
width: 100%;
}
Actually it was the paragraph in the #places div that was causing the images to shrink much more than required. Figured out that had to place it out of the #places div and inside the .showcase div like :
<div class="showcase shadow">
<p class="category">Places</p> // like this
<div id="places">
<div>
<img src="img\Taj Hotel.png" alt="">
</div>
<div>
<img src="img\Gateway of India.png" alt="">
</div>
<div>
<img src="img\Shack at Goa.png" alt="">
</div>
</div>
<p class="more-text">View more...</p>
</div>
and than setting the width of the images to 100% like gagan mentioned :
.showcase {
width: 100%;
margin-top: 5%;
display: inline-block;
#places {
width: 100%;
display: flex;
justify-content: flex-end;
div:nth-of-type(1) {
align-self: flex-end;
}
div {
margin-left: 0.5%;
img {
width: 100%; //width to 100%
}
}
}
}
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
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 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'm making a homepage and it works great in my resolution, but if I try to resize the window, the different logos (divs) start to overlap each other.
This is how it's supposed to look:
But whenever I resize the window, the logos (divs/pictures) overlap.
I have a lot of code that is what I believe to be irrelevant to the problem, but just in case, this is the complete code at jsfiddle (the pictures/font doesn't work though): http://jsfiddle.net/sXy3u/
Otherwise, this is an example of code of each div that I believe you'll need to help:
<div id="youtube">
<img src="youtube.png"/>
<a href="http://www.youtube.com/">
<div id="youtubeHover">
<div id="youtubeCircle">
<div id="youtubeArrow">
</div>
</div>
</div>
</a>
</div>
That's an example of one of the tiles. Now for two of the css codes:
#youtube {
width: 195px;
height: 195px;
margin-top: 5px;
padding-top: 5px;
position: relative;
overflow: hidden;
}
And the one that's overlapping:
#yahoo {
margin-top: -810px;
margin-left: 600px;
width: 195px;
height: 195px;
position: relative;
overflow: hidden;
}
This is where you have to use the Grid System Link
It gives you responsive layout depends on your screen such as Mobile, iPad, 1024x768 or HD Wide Screen. so if you use grid system, you don't need to recode your massive CSS. just attach every Metro Style Boxes in HTML part only with almost less coding.
I guess you have no idea about Grid Systems in Web Pages. no problem. I'll give you some basic tutorial links. have a look.Link
and this one is all available Grid System in the Web Industry nowadays. just have a look.
and if you use Grid System to this concept, you will amaze :)
You need to make your own custom responsive system up for this. Here's some basic stuff you can try out:
DEM0: http://jsbin.com/AKopuGo/1/
Notice how the sizes for the smallest device, which is 240px, the boxes don't exceed 200px total, but as the page gets bigger, the boxes are sized differently. Then the floats don't take effect until a certain min-width. You will need to learn more about responsive and fluid css if you intend to make this a career. All these min-widths are guesses and the styles will need to be set up and adjusted for each min-width, but not repeated. If a class is used for all sizes, put it outside any media queries, if it's use for a certain min-width (like the sizes of the box) put it there.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both
}
.page-container {
margin: 0 auto;
padding: 3%;
}
.logo-box {
width: 210px;
border: 1px solid red;
}
.logo-box > div {
float: left;
width: 100px;
height: 100px;
background: #fff;
margin-right: 5px;
margin-bottom: 5px;
}
.logo-box > div.wide {
width: 205px
}
.text {
margin-bottom: 3%
}
#media (min-width:600px) {
.logo-box {
width: 250px
}
.logo-box > div {
width: 120px;
height: 120px;
}
.logo-box > div.wide {
width: 245px
}
}
#media (min-width:800px) {
.float-left {
float: left
}
.float-right {
float: right
}
.text {
margin-left: 3%
}
.logo-box {
width: 310px
}
.logo-box > div {
width: 150px;
height: 150px;
}
.logo-box > div.wide {
width: 305px
}
}
#media (min-width:1200px) {
.logo-box {
width: 410px
}
.logo-box > div {
width: 200px;
height: 200px;
}
.logo-box > div.wide {
width: 405px
}
}
HTML
<div class="page-container">
<h1>Title</h1>
<section class="text float-right"> Date time etc. </section>
<section class="logo-box first float-left clearfix">
<div class="wide">
Reddit
</div>
<div class="square">
YouTube
</div>
<div class="square">
Google
</div>
<div class="square">
Gmail
</div>
<div class="square">
NetFlix
</div>
<div class="wide">
Pandora
</div>
</section>
<!--/.logo-box-->
<section class="logo-box second float-right clearfix">
<div class="wide">
Reddit
</div>
<div class="square">
YouTube
</div>
<div class="square">
Google
</div>
<div class="wide">
Reddit
</div>
</section>
<!--/.logo-box-->
</div>
<!--/.page-container-->
You'll also need to use fluid images.