I am trying to add a min and max width to the className "tile" however what I am using at the moment in my CSS isn't working. Once my screen size goes below 480px it jumps from this:
To this:
The height stays the same however it doesn't gradually change width when resizing the screen.
#media screen and (max-width: 480px) {
.tile {
position: relative;
height: 192px;
padding-bottom: 12px;
width: 100%;
}
.tile-image {
height: 192px;
margin-left: 24px;
object-fit: cover;
position: absolute;
border-radius: 4px;
max-width: 432px;
min-width: 272px;
z-index: 1;
}
.tile-gradient {
background-blend-mode: darken;
background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
height: 192px;
object-fit: cover;
border-radius: 4px;
z-index: 2;
position: absolute;
margin-left: 24px;
margin-right: 24px;
max-width: 432px;
min-width: 272px;
}
}
#media screen and (min-width: 481px) {
.tile {
position: relative;
width: 432px;
height: 192px;
padding-bottom: 12px;
}
.tile-image {
width: 432px;
height: 192px;
margin-left: 24px;
object-fit: cover;
position: absolute;
border-radius: 4px;
z-index: 1;
}
.tile-gradient {
background-blend-mode: darken;
background-image: linear-gradient(228deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36));
width: 432px;
height: 192px;
object-fit: cover;
border-radius: 4px;
z-index: 2;
position: absolute;
margin-left: 24px;
margin-right: 24px;
}
}
<div className="tile">
<div className="image">
<div className="tile-gradient"></div>
<img className={`tile-image ${!post.availability && "is-available"} `} src={post.img} alt=""/>
</div>
</div>
Any idea on how to fix this and make it responsive would be great so it does not jump from once size to the other automatically. Thank you in advance, please ask if any other information is required.
This happens because you're not using a screen width percentage to reduce the width of tile element. It directly change from 100% width to a specific 432px as you set it inside your #media screen and (min-width: 481px) query. Try to avoid specific pixel width and adjust it with percentage. Something like
#media screen and (max-width: 480px) {
.tile {
position: relative;
height: 192px;
padding-bottom: 12px;
width: 100%;
}
}
#media screen and (min-width: 481px) {
.tile {
position: relative;
width: 80%; // change this with the desired width of the element. Avoid using px
height: 192px;
padding-bottom: 12px;
}
}
A gradual change of width happens when resizing the screen if you're using percentages instead of specific pixels.
Related
On the page https://sport-print.online/sample-page/ I have a little button "Сравнить". I'm trying to adapt it using the CSS code:
#media only screen and (max-width: 1920px), only screen and (max-device-
width: 1920px) {
.compare
{
right: -500px;
top: -720px;
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
}
#media only screen and (max-width: 1024px), only screen and (max-device-
width: 1024px) {
.compare
{
right: -300px;
top: -320px;
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
}
Only the first part of the code works for width in 1920px. The second part of the code does not work. When the resolution is changed, the button position is not switched. Prompt please in what my error? Please correct my code.
Problem solved, the top and right properties do not affect position: static;
It was necessary to specify position: absolute; or position: relative; in the #media properties. Operating code:
.compare
{
width: 70px;
height: 30px;
line-height: 20px;
padding: 0 10px !important;
padding-right: 20px !important;
padding-bottom: 10px !important;
}
#media only screen and (max-width: 1920px), only screen and (max-device-width:
1920px) {
.compare
{
position: absolute; /* или position: relative;*/
right: -500px;
top: -720px;
}
}
#media only screen and (max-width: 1024px), only screen and (max-device-width:
1024px) {
.compare
{
position: absolute; /* или position: relative;*/
right: -300px;
top: 700px;
}
}
I am designing my web app to be mobile-first in design by using only the min-width media-query. However it is not working as how it should work! Instead of content being smaller at and below a screen-size of 500px, it is larger instead. And instead of content being larger at above a minimum screen-size of 500px, it is smaller. I want all content to be smaller at and below a minimum screen-size of 500px, and larger at screen sizes larger than 500px. I also want to have the "Generate Quote" and "Tweet" button shifted up or down to accommodate the changes induced by the min-width media-query
You can view my CodePen here: https://codepen.io/IDCoder/full/KZqNdr/
Here is my CSS code:
.container{
text-align: center;
background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
/**https://s25.postimg.org/exhm9rejz/galaxy-s8_overview_kv_type1.jpg"**/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
margin: auto;
/**border: 3px solid grey;**/
}
h1{
color: white;
}
.Motorcycle{
margin: auto;
width: auto;
/**border: 1px solid grey;**/
text-align: center;
}
/**
.cropper{
border-radius: 80px;
opacity: 0.85;
}
**/
.btn.btn-default{
color: #0040ff;
font-size: .80em;
font-family: Orbitron, sans-serif;
line-height: 4em;
}
.gstuff{
background-image: url("https://s25.postimg.org/onteix7u7/G_Motorcycle_Helmet_3.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 350px;
height: 477px;
margin: auto;
opacity: 0.85;
}
#push-one{
transform: translateY(200px);
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:15px;
height: 50px;
width: 150px;
margin: auto;
}
#push-two{
transform: translateY(530px);
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:7px;
height: 30px;
width: 50px;
margin: auto;
line-height: 2em;
color: blue;
}
#media(min-width: 500px){
.gstuff{
width: 250px;
height: 341px;
}
}
I achieved an adequate mobile-first min-widthwith this CodePen: , but I'm having a hard time achieving it with this one
For starters you have an error in your media query you need to specify screen and. Also, I assume that this is for the smaller screen size since gstuff has a wider initial setting.
#media screen and (max-width: 500px) {
.gstuff{
width: 250px;
height: 341px;
}
}
Next you need position:relative in your gstuff class. Finally, I absolutely position the tweet button bottom and in the center with:
#push-two{
background-color: #c6c6c4;
border-bottom:2px inset #FFF;
border-right:2px inset #FFF;
border-radius:7px;
height: 30px;
width: 50px;
margin: auto;
line-height: 2em;
color: blue;
position:absolute;
bottom:0;
left:50%;
right: 50%
}
Absolute positioning only works when you use position:relative or absolute on the parent container.
Here is a codepen
I've got a full page width image under the nav bar which will then have the title heading placed over it.
The thing is I cannot seem to figure out how to always have it dead centre no matter the size of the page. At the moment when the page is fully open, the title is in the middle, however upon resize the text goes down.
Any ideas?
<div class="row">
<div id="header-image">
<img src="images/header2.jpg" alt="header" class="img-responsive">
<div class="row">
<div class="col">
<h2 class="text-center">About Us</h2>
</div>
</div>
</div><!-- end header image -->
</div><!-- end row -->
#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; }
The use of Media Queries based on the screen size allows you to have different CSS depending on the resolution of the screen. The smaller you scroll the screen, it will then change it's CSS accordingly.
Media Query Tutorial : http://www.w3schools.com/css/css_rwd_mediaqueries.asp
The code below will change the font-size and the padding as the screen goes below the pixel requirements (500px and 200px). The padding was dropped to keep it under the image, and the font size was also lowered.
Solution 1
JS Fiddle : https://jsfiddle.net/Lq2zj48j/7/
#header-image {
width: 100%;
height: auto;
margin-top: 50px;
position: relative;
min-height: 200px;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
}
Solution 2
This solution has the chance of "squashing" the image. To avoid that, you could set the image in CSS (part of the background-image on your #header-image). From there you could set it to not repeat, centered and then use media queries to preserve the aspect ratio and "Zoom" in on the image on resize.
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
Js Fiddle : https://jsfiddle.net/Lq2zj48j/8/
#header-image {
width: 100%;
height: 400px;
margin-top: 50px;
position: relative;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
background-size: 1200px 652px; /* The dimentions of your image */
background-position: center;
background-repeat: no-repeat;
}
#header-image h2 {
color: white;
font-size: 5em;
font-family: 'cmlight';
position: relative;
padding-top: 10%;
}
#header-image .col {
position: relative;;
width: 100%;
}
#media only screen and (max-width: 700px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 300px;
}
}
#media only screen and (max-width: 500px) {
#header-image h2 {
font-size: 4em;
padding-top: 5%;
}
#header-image {
height: 200px;
}
}
#media only screen and (max-width: 200px) {
#header-image h2 {
font-size: 2em;
padding-top: 1%;
}
#header-image {
height: 175px;
}
}
I have a jsfiddle here https://jsfiddle.net/ajvvjnq3/
Really simple, I have a div with fixed width, position fixed and centered.
Below 600px I want the div to be 100% width with 20px margin left and right.
I can't get margin-right: 20px;
.block{
background: red;
height: 100px;
position: fixed;
top: 50px;
left: 50%;
margin-left: -200px;
width: 400px;
}
#media only screen and (max-width: 600px){
.block{
left: 0;
margin-left: 20px;
margin-right: -20px;
width: 100%;
}
}
<div class="block"></div>
JSfiddle https://jsfiddle.net/ajvvjnq3/2/
You could try using calc
width: calc(100% - 40px); seems to work fine
All its doing here is just negating the values from your margins.
Edit
Alternative would be to use #CBroe answer as it supports more browsers than calc, but whatever floats your boat:)
#media only screen and (max-width: 600px){
.block{
left: 20px;
right: 20px;
width: auto;
margin: auto;
}
}
I’d simply used this:
#media only screen and (max-width: 600px){
.block{
left: 20px;
right: 20px;
width: auto;
margin: auto;
}
}
Positioning the element 20px from left and right, and setting width to auto will make it get the right width while respecting the “gap” you want it to have on either side. And margin: auto (0 would work as well) simply undoes the margin you used earlier to center the element.
https://jsfiddle.net/ajvvjnq3/4/
Try this, it will work..
#media only screen and (max-width: 600px){
.block{
left: 0 !important;
margin: 0 !important;
position: relative !important;
right: 0 !important;
width: 100% !important;
}
}
Try this replace width:100%; with width:initial; add right:0;
#media only screen and (max-width: 600px){
.block{
position: fixed;
top: 50px;
left: 0;
margin-left: 20px;
margin-right: 20px;
right:0;
width:initial;
}
}
Demo Here
calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 20-pixel gap between both sides of the banner and the edges of the window
JSFIDDLE
http://jsfiddle.net/DhwaniSanghvi/okvoLuu5/
<div class="block"></div>
.block{
background: red;
height: 100px;
position: fixed;
top: 50px;
left: 50%;
margin-left: -200px;
width: 400px;
}
#media only screen and (max-width: 600px){
.block{
position: fixed;
top: 50px;
margin-left: 20px;
margin-right:20px;
left:0;
width: calc(100% - 40px);
}
}
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.