I'm trying to play with "Fluid Layers" and when resizing the window (manually resizing its width), I want to make: display:none on one of the Divs but it fails to do so (simply doesn't work).
Can you tell me why display:none on line 18 doesn't work?. And in addition, Should I use DIVS when i want to center 3 blocks inside a container? or you have a better idea for me?.
Would be happy to get a better / different ideas of implementing Liquid Layers if you know any. thank you for your help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #FFFFFF;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px)
{
body
{
background-color: #FFFFFF;
}
.col3 { display: none; }
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px)
{
body
{
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px)
{
body
{
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px)
{
body
{
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px)
{
body
{
background-color: lightblue;
}
}
</style>
</head>
<body>
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline- block">Text</div>
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
</div>
</body>
</html>
You used a class instead of an id as the selector.
Also i moved the common style for all the cols to the stylesheet instead of the inline style as you did.
body {
background-color: #FFFFFF;
}
#col1,
#col2,
#col3 {
width: 29%;
padding: 0;
margin-left: 3%;
margin-right: 3%;
background-color: #FFF333;
display: inline-block;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px) {
body {
background-color: #FFFFFF;
}
#col3 {
display: none;
}
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
body {
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px) {
body {
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px) {
body {
background-color: lightblue;
}
}
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1">Text</div>
<div id="col2">Text</div>
<div id="col3">Text</div>
</div>
Related
I am building responsive page. One section has a problem. When I make screen smaller background-color goes out(down on few mm).I checked - when I don't have any background - I don't have a problem. How to fix it? Why does it happen?
.bottomright{
grid-area: bottomright;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #D3D3D3;
position: relative;
}
.bottomright:hover{
z-index: 1;
box-shadow: 0px -2px 24px 2px rgba(0,0,0,0.2);
transform: scale(1.02);
}
.bottomright h4{
color: #808080;
flex: 0 0 auto;
align-self: flex-start;
position: absolute;
top:2rem;
left: 2rem;
}
.bottomright img{
flex: 0 1 auto;
align-self:center;
max-width: 80%;
}
<div class="bottomright">
<h4>SHCEDULE A MEETING AT
<p>IBC 2016</h4>
<img src="comigo/other/img-event-IBC.jpg">
</div>
Everything you want responsive you put in a div and then you have to set media screen propperty's for each display device in your css.
Like this:
#media screen and (min-width: 1024px){
.responsive{
...
}
}
#media screen and (min-width: 980px) and (max-width: 1024px){
.responsive{
...
}
}
/* Tablet */
#media screen and (min-width: 760px) and (max-width: 980px){
.responsive{
...
}
}
/* Mobile HD */
#media screen and (min-width: 350px) and (max-width: 760px){
.responsive{
...
}
}
/* Mobile LD */
#media screen and (max-width: 350px){
.responsive{
...
}
}
You are mentioned responsive web page but I can't find any media queries in your code. You have to use media queries, only then can you get a responsive web page.
It should like this
/* for Mobile */
#media only screen(min-width:630px)
{ ........}
/*for desktop */
#midea only screen (min-width:1224px)
{ .......}
friends!
I`m trying to make a grid of flexible images that come in a row. I dont even need additional div properties for that, works fine as is
<div class="container_imggrid"> <img> </div>
Css
.container_imggrid img {
display: inline-block;
max-width: 25%;
height: auto;
}
But now i need to add text above my picture, Div with text should be flexible as well.
U can see what i mean at this page http://www.reebok.com/us. That big image with "start designing" sign is flexible until some point, as well as text above it.
I need similar Header properties for my grid elements, but cant position my text block properly.
Can you please help me? Maybe i need absolutely another grid basis for such features?
My interactive fiddle is here: https://jsfiddle.net/CapablancaYEAH/yr809ty8/
P.S. To make things more clear, let me re-phrase.
I need a flexible grid.
Each separate block of grid is Square DIV with image inside and centered header on top of image.
Image should be resized and fit accordingly to div`s width/height (browser window size change).
Header should remain centered with div after any browser window resize.
Just set position:relative to parent div and position:absolute with top and left 50% for h2 tag.
.container_banner{position:relative;}
.container_banner img{width:100%;height:auto;}
.container_banner h2{position: absolute;
right: 0;
width: 50%;
left: 0;
margin: 0 auto;
text-align: center;
top: 44%;}
.container_imggrid{width:25%;}
<div class="container">
<div class="container_banner">
<h2>Swimming</h2>
<img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
</div>
<div class="container_imggrid container_banner">
<h2>Swimming</h2>
<img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
</div>
</div>
Make sure your parent div width is same as your <img> tag with. It should be same otherwise you need to set your image in background inside the parent div.
Hope this will helpful for you.
Thanks.
Using position: relative (for parent) and position: absolute (for child)
https://jsfiddle.net/kaskull/yr809ty8/4/
You can use media queries at each stage to manipulate the text size at different screen sizes like:
#media only screen and (min-width: 360px){
.flx-text{
font-size:1em;
}
}
Example Fiddle (try resizing for effect):
JSFIDDLE
Snippet [Go full screen and resize for effect]:
.container_banner {
padding-bottom: 15px;
}
.container_banner img {
max-width: 100%;
height: auto;
}
.container_imggrid img {
display: inline-block;
max-width: 25%;
height: auto;
}
.container_imggrid h2 {
display: block;
position: fixed;
max-width: 50%;
}
#media only screen and (min-width: 360px) {
.flx-text {
font-size: 0.9rem
}
}
#media only screen and (min-width: 390px) {
.flx-text {
font-size: 1.0rem
}
}
#media only screen and (min-width: 420px) {
.flx-text {
font-size: 1.1rem
}
}
#media only screen and (min-width: 450px) {
.flx-text {
font-size: 1.2rem
}
}
#media only screen and (min-width: 480px) {
.flx-text {
font-size: 1.3rem
}
}
#media only screen and (min-width: 510px) {
.flx-text {
font-size: 1.4rem
}
}
#media only screen and (min-width: 540px) {
.flx-text {
font-size: 1.5rem
}
}
#media only screen and (min-width: 570px) {
.flx-text {
font-size: 1.6rem
}
}
#media only screen and (min-width: 600px) {
.flx-text {
font-size: 1.7rem
}
}
#media only screen and (min-width: 630px) {
.flx-text {
font-size: 1.8rem
}
}
#media only screen and (min-width: 660px) {
.flx-text {
font-size: 1.9rem
}
}
#media only screen and (min-width: 690px) {
.flx-text {
font-size: 2.0rem
}
}
#media only screen and (min-width: 720px) {
.flx-text {
font-size: 2.1rem
}
}
#media only screen and (min-width: 750px) {
.flx-text {
font-size: 2.2rem
}
}
#media only screen and (min-width: 780px) {
.flx-text {
font-size: 2.3rem
}
}
#media only screen and (min-width: 810px) {
.flx-text {
font-size: 2.4rem
}
}
#media only screen and (min-width: 840px) {
.flx-text {
font-size: 2.5rem
}
}
#media only screen and (min-width: 870px) {
.flx-text {
font-size: 2.6rem
}
}
#media only screen and (min-width: 900px) {
.flx-text {
font-size: 2.7rem
}
}
#media only screen and (min-width: 930px) {
.flx-text {
font-size: 2.8rem
}
}
#media only screen and (min-width: 960px) {
.flx-text {
font-size: 2.9rem
}
}
#media only screen and (max-width: 360px) {
.flx-text {
font-size: 0.8rem
}
}
<div class="container">
<div class="container_banner">
<img src="https://i.yapx.ru/JEvD.jpg" width="1000" height="300">
</div>
<div class="container_imggrid">
<h2 class="flx-text">Swimming</h2>
<img src="https://i.yapx.ru/JEvC.jpg" width="500" height="500" alt="Подводное плавание">
</div>
</div>
After all, I was able to figure out a solution. It uses a trick with
font-size: 0;
see https://jsfiddle.net/CapablancaYEAH/68aqv37b/
I have a set of breakpoints that I am trying to work with and am using the following CSS code to change css rules however the rules are only being applied to screens over 1200px wide and not the others.
/* Large Desktop Devices */
#media (min-width: 1200px) {
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media (min-width: 768px) and (max-width: 1023px)
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media (min-width: 480px) and (max-width: 767px)
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media (min-width: 320px) and (max-width: 479px)
.header {
height: 80px;
}
}
If anyone can see why this isn't working, I would love to know!
Thanks
use like this
#media screen and (max-width:1200px)
#media only screen and (max-width:1200px)
ensure you have added viewport metatag in your page
<meta name="viewport" content="width=device-width, initial-scale=1">
also You are missing opening braces on the last 3 statements
/* Large Desktop Devices */
#media (min-width: 1200px) {
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media (min-width: 768px) and (max-width: 1023px){
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media (min-width: 480px) and (max-width: 767px){
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media (min-width: 320px) and (max-width: 479px)
.header {
height: 80px;
}
}
hope it helps.
/* Large Desktop Devices */
#media screen and (min-width: 1200px){
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media screen and (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media screen and (min-width: 768px) and (max-width: 1023px) {
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media screen and (min-width: 480px) and (max-width: 767px) {
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media screen and (min-width: 320px) and (max-width: 479px) {
.header {
height: 80px;
}
}
You need to change it to # media all and (max-width: 480px)
I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).
Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
I'm having an issue with media query. I set the first on at 770px, so that it would re-size without putting the sidebar underneath the main content.
I then set the second media query at 740 (it was at 450, but I changed to 740 for the iPad Mini), thinking this would send the side-bar underneath the main content. (meaning that if held the iPad Mini vertically, it would look the same as it does on iPhone).
This works on my iPhone, but on iPad mini it keeps the 770px settings when viewed vertically (non-landscape mode).
What am I doing wrong? I assumed 740 would be high enough max-width, given that 770 works for landscape mode.
Here is the site: http://www.insidemarketblog.com
and here's the code
HTML:
div class="container">
<div class="columns">
<div class="content">
<div id="post-1" class="post_box grt top" itemtype="http://schema.org/Article" itemscope="">
<div id="comments">
<div class="prev_next"> </div>
</div>
<div class="sidebar" style="height: 560px;">
</div>
CSS:
#media all and (max-width: 740px) {
.container, .landing .container {
width: auto;
/*max-width: 720px;*/
/*max-width: $w_content;*/
max-width: 100%;
}
.header {
border-top: 1px solid $color1;
}
.landing .header {
border-top: 0;
}
.columns > .content {
/*float: left;*/
float: none;
/*width: 445px;*/
width: 100%;
border: 0;
}
.columns > .sidebar {
/*float: right;*/
float: none;
/*width: 275px;*/
width: 100%;
border-top: 3px double $color1;
}
.menu a, .menu_control {
padding: 1em $x_half;
background-color: #C24F43;
}
.header, .columns > .sidebar, .post_box, .prev_next, .comments_intro, .comment, .comment_nav, #commentform, .comment_form_title, .footer {
padding-right: $x_half;
/*padding-left: $x_half;*/
}
.menu .sub-menu, .children .comment {
padding-left: $x_half;
}
.comments_closed, .login_alert {
margin-right: $x_half;
margin-left: $x_half;
}
.comment_form_title {
margin-left: -$x_half;
margin-right: -$x_half;
}
.right, .alignright, img[align="right"], .left, .alignleft, img[align="left"] {
float: none;
}
.grt .right, .grt .left, .post_box .alignright, .post_box .alignleft, .grt blockquote.right, .grt blockquote.left {
margin-right: 0;
margin-left: 0;
}
.post_author:after {
content: '\a';
height: 0;
white-space: pre;
display: block;
}
.grt blockquote.right, .grt blockquote.left, #commentform .input_text, .sidebar .search-form .input_text, .sidebar .thesis_email_form .input_text {
width: 100%;
}
.post_box blockquote {
margin-left: 0;
}
.comment_date {
display: none;
}
}
Try this media query.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}