I am pretty new to HTML and CSS.
Right now I have a 4 column layout that has 4 images all next to each other on a desktop view and when in mobile, all the icons are stacked on top of one another. Here is an image to explain.
DESKTOP VIEW
I am not allowed to post more than one link, so I will use x's to explain.
This is desktop view using x's:
X X X X
This is the current mobile view using x's"
X
X
X
X
(all the images / icons are stacked on one another)
This is what I am trying to achieve using CSS:
X X
X X
(images are grouped together on one line)
I saw a post using float left and float right attributes targeted for small screen sizes. Not sure if that would work. I would love some help.
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 94%;
}
/* 2 columns: 330px */
#media only screen and (min-width: 330px) {
.hot-icon-group {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.hot-icon-group:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .hot-icon-group {
width: 31.623931623931625%;
}
.autowide .hot-icon-group:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .hot-icon-group:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .hot-icon-group {
width: 23.076923076923077%;
}
.autowide .hot-icon-group:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .hot-icon-group:nth-child(4n+0) {
margin-right: 0;
}
}
<div class="autowide">
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
</div>
You can use media queries to apply specific CSS based on device or browser dimensions.
Replace the p tag with your divs.
p {
text-align: center;
}
.container {
max-width: 65rem;
margin: 2rem auto;
}
.grid-size {
display: flex;
flex-wrap: wrap;
}
.size1of4 {
width: 25%;
}
.size1of4:nth-of-type(even) {
background-color: green;
}
.size1of4:nth-of-type(odd) {
background-color: yellow;
}
#media all and (max-width: 768px) {
.size1of4{
width: 50%;
}
}
#media all and (max-width: 480px) {
.size1of4{
width: 100%;
}
}
<div class="container">
<div class="grid-size">
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
</div>
</div>
Related
I have a footer container. There are some menu items and two paddels(left and right) to scroll left and right the menu. There are one description text and one log link.
Now, if the screen size is more than 768px then all these three divs( menu, description text, log link) are in same line. Which is fine. But, if i choose screen size less than <768px then as per my application design will be like this below.
< Menu >
Description text Log link
Here is the screenshot for less than <768 px.
Now, description text and log link aren't in same line . Because of repair log width, menu inner wrapper is hided behind the screen. How to solve this?
Here is my css style for less than (768 px screen)
#media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
div{
display:inline;
}
}
.div2{
float:right;
}
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<body/>
You can check out this code just add display:inline; in the CSS of the div.
I got a grid, made out of inline-block elements so they can overflow to other rows.
The problem is that, if the row is not complete, the items in that row are also centered and not aligned to the left side, like if they'd just overflow.
The problem can be seen in this Fiddle.
Is there any way to do this in the pure CSS ? So that the container is centered, but the elements inside it remain to be on the left side ?
I already tried to use margin: 0 auto; to center just the container, but the container would have to have fixed width, but in this situation the container expands as far as it can (fills the outer container).
Edit: The only way I can think of is getting the width of the container with Javascript and then dividing the width by the width of the elements (as they have the same width), apply the width to the container and go with the margin: 0 auto; method.
This is not doable in a general case (see this post) because CSS can't determine when an element wraps and therefore recalculate the empty space required.
Similar to the solution in that post, you can use media queries to achieve this result. I have written a version more specific to your case:
.grid {
margin: 0 auto;
width: 990px;
font-size: 0;
}
.item {
display: inline-block;
margin: 5px;
width: 100px;
height: 100px;
background: red;
}
#media screen and (max-width: 230px) {
.grid {
width: 110px;
}
}
#media screen and (min-width: 231px) and (max-width: 340px) {
.grid {
width: 220px;
}
}
#media screen and (min-width: 341px) and (max-width: 450px) {
.grid {
width: 330px;
}
}
#media screen and (min-width: 451px) and (max-width: 560px) {
.grid {
width: 440px;
}
}
#media screen and (min-width: 561px) and (max-width: 670px) {
.grid {
width: 550px;
}
}
#media screen and (min-width: 671px) and (max-width: 780px) {
.grid {
width: 660px;
}
}
#media screen and (min-width: 781px) and (max-width: 890px) {
.grid {
width: 770px;
}
}
#media screen and (min-width: 891px) and (max-width: 1000px) {
.grid {
width: 880px;
}
}
#media screen and (min-width: 1001px) and (max-width: 1110px) {
.grid {
width: 990px;
}
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Writing this many media queries, however, is not advised. I actually generated them using Sass (see my CodePen):
$width: 100px;
$margin: 5px;
$extra-padding: 10px;
$column-width: $width + 2 * $margin;
$num-blocks: 9;
#function screen-size($n) {
#return $n * $column-width + $extra-padding;
}
.grid {
margin: 0 auto;
width: $num-blocks * $column-width;
font-size: 0;
}
.item {
display: inline-block;
margin: $margin;
width: $width;
height: 100px;
background: red;
}
#media screen and (max-width: screen-size(2)) {
.grid {
width: $column-width;
}
}
#for $i from 2 through $num-blocks {
#media screen and (min-width: screen-size($i) + 1px) and (max-width: screen-size($i + 1)) {
.grid {
width: $i * $column-width;
}
}
}
The above solution has its limitations, it can only work with fix number of blocks. If that's a concern, you will have to use a JavaScript library such as Desandro Masonry or just roll your own.
It seems like it's not possible to do it with CSS only approach (unless using Flexbox).
That means I'm going to use the "set width with Javascript and use margin: 0 auto" method.
The best would be to use the CSS only method proposed by #Nelson Yeung, but I'm going to use it on multiple pages, where the container width would not be the same.
Also interesting thing is that Zeplin, platform for front-end developers <> designers, is also using the method I'm going to use.
I want to make an 100% full page, within 4 images on each row. But if you resize the window you'll get 3 images than 2 images till there is 1 left. After research I become at #media to fill the full page without getting any blank spaces. Now i've made this jsfiddle but if you resize the results window you will see blank spaces who are not filled. What am I doing wrong?
#media only screen and (min-width : 354px) {
/* Smartphone view: 1 tile */
.image{
width: 100% }
https://jsfiddle.net/8hfLkb3k/
The image always must fill both width's, if the width is 50% for 2 both images must fill it in for 50%.
Thanks.
I recommend using max-widths for your media queries, but you don't have to do this, as long as what you do gives you the intended and correct result.
In my working example I've chosen to set the one-image container for 25% unless something changes like the viewport width.
At 1024, 767 and 600 I've chosen the 1/3 and 1/2 sizes and finally the 100% width.
I expect this is what you mean, but feel free to adapt this code as you see fit, especially to match the media query viewport attributes to what you desire.
* {
box-sizing: border-box;
}
.one-image {
width: 25%;
float: left;
border: 1px solid red;
}
.one-image img {
width: 100%;
border: 1px solid blue;
display: block;
}
#media screen and (max-width: 1068px) {
.one-image {
width: 33.33%;
}
}
#media screen and (max-width: 767px) {
.one-image {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.one-image {
width: 100%;
}
}
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
Your images (<img> elements) are not expanding to the full width of the .image containers because you're missing this rule, which you can add to your CSS:
.image img {
width: 100%;
}
Here's your example code updated to show this working:
.image img {
width: 100%;
}
.f_left {
float: left;
}
#media only screen and (min-width: 354px) {
/* Smartphone view: 1 tile */
.image {
width: 100%;
}
}
#media only screen and (min-width: 708px) {
/* Smartphone view: 2 tile */
.image {
width: 50%;
}
}
#media only screen and (min-width: 1062px) {
/* Small desktop / ipad view: 3 tiles */
.image {
width: 33.3%;
}
}
#media only screen and (min-width: 1417px) {
/* Medium desktop: 4 tiles */
.image {
width: 25%;
}
}
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
How can I set a fluid height for each row? The rows would either be 4 or 6 based on the orientation as there are 24 total icons (6x4 or 4x6).
I was able to solve the 4 col and 6 col icon set and have a fluid width. However, I cannot figure out how to get the spacing between rows fluid for the height.
Also, I'm open to suggestions on how to improve the code as well if you think there's a better alternative.
Here's my code:
CSS
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
/* Clear 4 columns */
.profile {
display: none;
}
.app {
float: left;
text-align: center;
width: 25%;
}
.clear4 {
clear: both;
}
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) {
/* Clear 6 columns */
.profile {
display: none;
}
.apps {
}
.app {
float: left;
text-align: center;
width: calc(100%/6);
}
.clear6 {
clear: both;
}
}
HTML
<div class="apps">
</div><!-- .apps -->
you mean the space between the app divs?
.app {
float: left;
position:relative;
text-align: center;
width: 100%;
margin-bottom:50px;
margin-top:50px;
}
have a look in here fiddle
Hi I am almost finished with my website but I have a small issue of the columns not displaying at 100% when on a mobile device, I do not know what I have done wrong in the css below but the max-width 320px does not seem to be making the column go 100% when on mobile.
here is a link to my site to see what happens
http://www.ico.mmu.ac.uk/08506125/portfolio/index.html
I know it's a really simple solution...
#media(max-width : 320px){
.column.half { width: 100%;}
}
/* Column sizes */
#media (min-width: 40rem)
.column {
float:left;
padding-left:1em ;
padding-right:1em;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
/* Column sizes end */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
.third { float:left; display:inline;}
.half { float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image { border-style: double; border-color:white;}
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
Just put this condition in the bottom because you override it with your default width.
.column.half { width: 50%;}
#media(max-width : 320px){
.column.half { width: 100%;}
}
please notice "half" class stop getting "float left" on 640px so you've got the issue already from there...because there are devices with bigger screen resolution, maybe it can be better for you to change 320px to 640px:
#media (max-width: 40rem){
.column.half
{
width: 100%;
}
}