Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have created a website that should only be viewed in Landscape mode on tablets.
Using CSS, is there a way to hide the website and display an image / text if the user loads the website in Portrait mode?
Thank you in advance for your help,
ZeBobo
Yes, You can use CSS Media queries.
MDN Docs
Code is copied from MDN docs. This explains on how to use the landscape and portrait orientations.
body {
display: flex;
}
div {
background: yellow;
}
#media (orientation: landscape) {
body {
flex-direction: row;
}
}
#media (orientation: portrait) {
body {
flex-direction: column;
}
}
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
Be careful while using this. There's no actual compatibility list provided.
You can use media queries:
#media screen and (orientation:portrait) { … }
#media screen and (orientation:landscape) { … }
Inside you can specify what to show, i.e. the text information on how to view the page.
Related
I was designing a wordpress page with elementor. The site is perfect in desktop. But while on mobile, the first section of the elementor is not displayed. Is there someway I can fix this with custom php code?
The issue is caused by CSS code,
The following CSS code is causing the div height to be 1px which makes it invisible:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
height: 100%;
}
The expression
#media (min-width: 768px)
Applies the code only for screens with a higher width than 768 which makes it unsupported for mobiles.
To fix this you need to apply the following code to your custom CSS:
#media (max-width: 768px)
.elementor-section.elementor-section-height-full>.elementor-container {
min-height: 350px;
}
Give it a try and let me know.
I'm working on a UI in CSS and I'd like to apply different styling when device is turned horizontally or vertically. I know that it probably can be achieved using media queries, but I don't know the specific keyword (if there's some)
I've thought about somehow calculate and use max-width and max-height in the queries, but I didn't come up with a working solution.
In the example I'll use just some basic code:
#menu {
display: grid;
}
#media only screen and (max-width: 600px) { /* This is just an example to not break the code, I'd like to have there something like: max-width: device-height */
display: flex;
}
I hope it's understandable, I'll be really happy for any help :)
#media screen and (orientation: portrait) {
-----Horizontal-----------------
}
#media screen and (orientation: landscape) {
-----Vertical-----------------
}
For more information : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have been given a mock-up design with a header that hass a curved image (similar to http://www.smartwebby.com/images/tutorials/fireworks/website_design_fireworks/pic_header_footer.gif or http://theme-fusion.com/wp-content/uploads/2014/10/curved-header.png). at the top. The thing is it has to be fluid & responsive. I like to conceptually figure things out somewhat before I start making them. Can someone help me how I would make this responsive. If I just make it 100% width its going to be extremely distorted at some points. Any ideas?
As you guessed you can use width: 100% but then use media queries to serve a different image to different screen sizes such as:
header {
width: 100%;
}
#media only screen and (min-width : 480px) {
header {
background-image: url("/img/image-xs.png");
}
}
#media only screen and (min-width : 768px) {
header {
background-image: url("/img/image-sm.png");
}
}
#media only screen and (min-width : 992px) {
header {
background-image: url("/img/image-md.png");
}
}
#media only screen and (min-width : 1200px) {
header {
background-image: url("/img/image-lg.png");
}
}
The multiple selection of images allows you to combat the pixelation that you are afraid of. By serving an image that fits the screen best at different break points, you will keep the image quality relatively good at all sizes.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
Actually to hide background image here is the simple css:
background-image: none;
Here is the solution for mobile, i used media queries
HTML
<div class="bgimg" >
</div>
External CSS
/* Show in Large desktops and laptops */
#media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
#media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
#media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
You can use media query to specify different css rules for desktop version of site and mobile site .
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling .
Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to be able to swap the jquery mobile CSS for a desktop "friendly" CSS. For example when a user is NOT on a mobile device display the styles in a non mobile type style. Is there a platform or existing CSS that does this?
Just change the mobile version css to looks good in desktop.
CSS3 Media Queries
Some Examples:
Max Width -
If the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
Min Width -
The following CSS will apply if the viewing area is greater than 900px.
#media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Multiple Media Queries -
Combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width
The code will apply if the max-device-width is 480px (ex. iPhone display)
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Link to a separate stylesheet:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />