when I made the mobile view version of the carousel image, the image broke.
how do you not break the image when responsive to mobile devices?
my Code:
#media screen and (min-width: 320px) and (max-width: 768px) {
.background {
position: relative;
flex-wrap: wrap;
}
.slideshow_container {
width: 100%;
.slideshow {
flex-direction: column;
img {
width: 33vh;
height: 33vh;
}
}
}
}
enter image description here
Related
I am trying to make a background image responsive with media queries,
but the image retains its original size.
I can't see where i am doing it wrong.
I appreciate any help
#wrapper{
background: url(https://via.placeholder.com/1500x1000) center center cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#media (min-width:1201) {
#wrapper {
background-image: url(https://via.placeholder.com/1300x900);
}
}
#media (max-width:1200px) and (min-width:901) {
#wrapper{
background-image: url(https://via.placeholder.com/900x750);
}
}
#media (max-width:900px) and (min-width:601) {
#wrapper {
background-image: url(https://via.placeholder.com/800x650);
}
}
/* For mobile devices */
#media only screen and (max-width: 600px) {
#wrapper{
background-image: url(https://via.placeholder.com/500x405);
}
}
<div id="wrapper">
</div
Inspecting the HTML reveals that your background property is invalid. Try
#wrapper{
/* mobile first this image and move to wherever you intended this one */
background: url(https://via.placeholder.com/1500x1000) center center no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
The rest of your queries could use some cleanup
/* For mobile devices */
#media only screen and (max-width: 600px) {
#wrapper{
background-image: url(https://via.placeholder.com/500x405);
}
}
#media (min-width:601px) {
#wrapper {
background-image: url(https://via.placeholder.com/800x650);
}
}
#media (min-width:901px) {
#wrapper{
background-image: url(https://via.placeholder.com/900x750);
}
}
#media (min-width:1201px) {
#wrapper {
background-image: url(https://via.placeholder.com/1300x900);
}
}
Hello everyone
I'm using a 'main' media query to target all major changes form desktop to mobile with this (scss) :
// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;
#media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
.contact-indicator {
display: none;
}
.hero-wrap {
margin-top: 70px;
overflow-x: hidden;
// disable left side of the hero
.left-side {
display: none;
.main-img {
display: none;
}
.hero-arrow {
display: none;
}
}
// disable the right side of the hero
.right-side {
display: none;
.main-heading {
display: none;
}
.hero-descrip {
display: none;
}
.button-wrap {
display: none;
.hero-btn {
display: none;
}
.btn-arrow {
display: none;
}
}
}
.mobile-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.flex-left {
min-width: 100vw;
width: 100vw;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.mobile-h2 {
position: absolute;
right: 19px;
font-size: 33px;
font-weight: 300;
text-align: right;
max-width: 298px;
width: 298px;
min-width: 298px;
margin: 8px 0 0 0;
padding: 0;
}
.mobile-hero-img {
max-width: 355px;
margin-right: -140px;
}
}
.mobile-hero-p {
margin-left: -45px;
font-size: 15.5px;
margin-top: 55px;
max-width: 272px;
line-height: 26px;
}
.mobile-hero-btn {
margin-top: 45px;
min-width: 191px;
max-width: 191px;
min-height: 53px;
height: 53px;
max-height: 53px;
border-radius: 14.5px;
background-color: $grid-black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
}
}
And then, when I'm trying to be more specific with the viewports like this:
// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (min-height: 667px) and (max-height: 667px) {
.hero-wrap {
margin-top: 65px;
}
.mobile-title {
.mobile-hero-p {
margin-top: 40px;
}
}
}
// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (max-height: 812px) {
.mobile-title {
.mobile-hero-p {
margin-top: 70px;
}
}
}
The last two media queries don't seem to get registered.
If it helps, all the code is available on github : https://github.com/DesignedByNino/gridbase-studio in the 'src' folder under 'css/index.scss'.
This project uses vue.js - but it's not exactly relevant to the question, just so you know if you take a look.
Thank you in advance for all the answers!
As mdn says:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width, which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
and then you can use your media queries:
#media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}
UPDATE:
I've created a simplified sample:
#media screen and (min-width: 320px) and (max-width: 1020px)
and (min-height: 813px)
{
.mobile-title {
background-color: lightgreen;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 0px) and (max-height: 667px) {
.mobile-title {
background-color: lightpink;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 668px) and (max-height: 812px) {
.mobile-title {
background-color: lightgoldenrodyellow;
}
}
<div class="mobile-title">
A title
</div>
After some time in Chrome Dev Tools, I found out that the styles I was trying to target with the device specific media queries were not registering because I was not specific enough in SCSS with the last media queries.
I am trying to apply media queries to my website, however nothing is changing.
I have tried changing the position of my media query in the CSS flow, but no joy.
here is the specific part of the code:
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
I would like to replace the desktop header with a simplified mobile header that just displays images rather than the text. Currently, nothing is changing at all. Everything seems sound in the html, so I can only think I am leaving something out of the CSS?
Thank you for your help in advance!
I found nothing wrong with your code. It's absolutely fine! May be there are other conflicting code that bars your code from displaying as you intended.
Here I added some HTML and it's working fine with your code.
.desktop-header {
display: flex;
justify-content: space-between;
align-items: center;
height: auto;
width: auto;
padding: 0 1.5rem;
}
.mobile-header {
display: none;
}
#media only screen and (max-width: 480px) {
.desktop-header {
display: none;
}
.mobile-header {
display: flex;
height: 4rem;
width: auto;
justify-content: space-around;
align-items: center;
}
}
<div class="desktop-header">
<h1>Desktop Header</h1>
</div>
<div class="mobile-header">
<h1>Mobile Header</h1>
</div>
use these media queries and follow at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%; //// ?????
display: inline-block;
}
}
#media_wrapper {
height: 100%;
display: none;
}
As you can see, the element is not active for large screens display: none;, but I do not know how to correctly set the display attribute in the query to display on a small screen, after trying for example: block or inline-block, the result is one - nothing is displayed. What am I doing wrong?
Try this
Check Demo HERE
Reverse it
CSS:
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%;
display: inline-block;
}
}
best way is to change the order of command:
See fiddle:https://jsfiddle.net/17d6hxsL/5/
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block;
}
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
Or you should set !important to pervent override:
See fiddle:https://jsfiddle.net/17d6hxsL/4/
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block!important;
}
}
#media_wrapper {
height: 100%;
display: none;
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
I am trying to achieve a simple clean minimalistic responsive layout in CSS3 Flex, where:
A) in the desktop mode the body contains three vertical elements side by side "all in one row", and;
B) an alternative vertical oriented mobile version mode where the body contains the elements as rows on top of eachother, "all in one column".
But my code is broken somewhere as I dont see the mobile version kicking in when resizing the the window to narrow vertical orientation. What am I missing?
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
flex: 1;
background: yellow;
}
main {
flex: 2;
background: tomato;
}
nav {
flex: 1;
background: tan;
}
aside {
flex:1;
background: thistle;
}
/* FOR MOBILE PHONES */
#media only screen and (orientation: vertical) and (max-width: 768px) {
body{
flex-direction: column;
}
main {
background: crimson; /* test to see if mobile mode is activated */
}
}
<body>
<main>content</main>
<nav>nav</nav>
<aside>aside</aside>
</body>
orientation: can be portrait or landscape:
body {
display: flex;
min-height: 100vh;
flex-direction: row;
flex: 1;
background: yellow;
}
main {
flex: 2;
background: tomato;
}
nav {
flex: 1;
background: tan;
}
aside {
flex: 1;
background: thistle;
}
/* FOR MOBILE PHONES */
#media only screen and (orientation: portrait) {
body {
flex-direction: column;
}
main {
background: crimson;
}
}
<body>
<main>content</main>
<nav>nav</nav>
<aside>aside</aside>
</body>