When I rotate the phone to landscape view, I still want to see the web page in portrait view. It is possible to force this only with CSS?
This could lower the UX tremendously, seeing as the viewport is now only half the height. In most cases it makes more sense to simply make the landscape-view more userfriendly (though it's rarely gonna be as nice as portrait!).
To answer your question, though:
Using media queries you could use the orientation media property and make your container width equal to the viewport height.
Something like the following:
#media (max-width: 768px) and (orientation: landscape) {
#container-div {
width: 100vh;
}
}
Its also easy to re-rotate using css..
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
body {
-webkit-transform: rotate(-90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
But as mentioned in the other answer... it is a better to make a more userfriendly layout for landscape view as well...
Related
I am including two picture of the same section to illustrate what's happening on the website when I drag the screen to a smaller size. I am hoping to use the media queries to prevent such a thing from happening. Dragging the screen size smaller is changing the text and the size of the elements pictured. When I input the media queries into custom css, I see nothing change and my goal is to have the screen size look very similar across all screen sizes that use the website.
Before dragging screen to smaller size:
enter image description here
After dragging screen to smaller size:
enter image description here
/*For browser/screen widths less than 768px*/
#media screen and (max-width: 1440px) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-height: 900px){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 900px) and (orientation: portrait) {
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
#media only screen and (min-width: 1440px) and (orientation: landscape){
.container {
max-width: 75%;
}
.content {
width: 50%;
}
}
I've tried multiple css media query styles and I have not seen any changes to any pages of the website. Please help me to assess what I am doing wrong. I am exploring all options to make this website responsive. The divi builder only provides three options, desktop, tablet and mobile for screen sizing. I need more screens recognised which is why I am using custom css for this project. I have noticed especially on macbook air that the screen size is having multiple issues accommodating the size of elements on each page. Some images are cutoff on pages and some are turning into different weird sizes that were not intended to do so.
Thanks in advance!
I am trying to use media queries to affix text to the bottom of a background image on a second page. When I edit the padding-top it affects the content on desktop mode, even if I adjust the media query to (max-width: 500px) and keep the desktop above 500px (which should then be outside the parameters of the media query, right?), but it has no bearing on mobile views. This is what I think the code should be, and it looks fine on desktop but leaves a large gap on mobile.
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
I also tried adding the following code to force mobile to have no top padding, but again it had no effect on mobile:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
Neither of the snippets of code you have shown are legal CSS.
The first:
#media screen and (min-width: 500px) {}
.site-boxed-container .site-content {
max-width: 100%;
padding-top: 50%;
}
does nothing. You have given the media query nothing to do - there is a matched pair of curly brackets immediately after the query. So everything will have the same padding-top.
The second:
#media screen and (min-width: 250px) and (max-width: 499px)
.site-boxed-container .site-content{
padding-top: 0%;
}
has a syntax error, there is no opening curly bracket immediately after the media query. Everything that pertains to a media query must come within curly brackets.
The correct syntax for this would be:
#media screen and (min-width: 250px) and (max-width: 499px) {
.site-boxed-container .site-content{
padding-top: 0%;
}
}
assuming you want to make padding top zero for viewports with widths between 250px and 499px.
i try to resize div.social-menu-item. but order of #media min-width don't work correctly for me.
when my screen is less than 500px it uses #media (min-width: 768px).
minimum width is earlier, #media min-width 240px is written before 540px is written before 768px
I can have a question why?!!
I don't know how to resolve this bug!!!
see below picture for more...
.social-menu-item {
height: 100%;
width: 12%;
display: inline-table;
}
#media only screen and (min-width: 240px) {
.social-menu-item {
width: 50%;
background: #fff;
}
}
#media only screen and (min-width: 568px) {
.social-menu-item {
width: 25%;
background: #000;
}
}
#media only screen and (min-width: 768px) {
.social-menu-item {
width: 12%;
background: #fff;
}
}
live in http://namvarii.ir/ social icons.
i used max-width for resolve this problem for me, but it's not correct it.
This problem doesn't solved,
cause i think the view slider have fixed.
And when i change browser size CSS min-width or max-width don't affect to element. and this problem cant solved!!
Use max-width instead. That should apply the rules in the order that you need:
max-width 768px = 568 -> 768
max-width 568px = 240 -> 568
max-width: 240px = 0 -> 240
Working pen: https://codepen.io/antonbks/pen/oNvzyLP
In media query use min and max width as you are trying to make responsive and trying to support on basis of conditional width
Ok so today I said hey, let's learn us some Responsive Web Design Techniques. So far so good I suppose ;)
#media screen and (min-width: 768px) {
#avacweb_chat{
height: 70%;
width: 600px;
}
}
#media screen and(min-width:600px) {
#avacweb_chat{
height: 70%;
width: 540px;
}
}
#media screen and(min-width:480px) {
#avacweb_chat{
height: 500px;
width: 320px;
}
#chatbox_members{
display:none;
}
}
#media screen and(min-width:320px) {
#avacweb_chat{
height: 360px;
width: 220px;
}
#chatbox_members{
display:none;
}
}
I wanted to ask a few question to some of my great S.O. members, so I see the media query is focused on screen is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Or are we only allowed to focus on screen size? Also are we allowed to use transitions and transform in these media queries? (I know IE won't support). these are the only two questions I have.
Focusing on size of another element besides Screen
Adding CSS3 to the queries.
Also are we allowed to use transitions and transform in these media queries?
Yes, for sure. Simply include them as you normally would
is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Not sure what you are getting at here. If your goal here is to cusomise the avacweb_chat div for viewports above 500px, use
#media (min-width: 500px) {
#avacweb_chat{
/* some styles here */
}
}
If you are just getting your feet wet with responsive design, have you considered some of the options like Bootstrap or Foundation or one of the many other good choices. They aren't necessarily for everyone, but they'll get you off to a fast start.
Have fun with RWD!
I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?
Set the width and height on the img tags to be percentages (of their container):
<img src="http://..." alt="" width="50%" height="30%" />
Adjust percentages to your needs.
Use media queries.
e.g:
#media all and (min-width: 1001px) {
img {
width: 100%; /* insert prefered value */
height: auto;
}
}
#media all and (max-width: 1000px) and (min-width: 700px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
Try this
img
{
width:100%;/*adjust this value to your needs*/
max-width: the size of the image;/* so it wont get bigger and pixelated*/
height:auto;
}
another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.
here is a fiddle to see if this is what you are trying to achieve