how can i change the value of my "height" element when the device or width/height changes? my default height size is 180px (that's a rectangle in LG(large screen) but the height doesn't change when i try visit in mobile device (XS) mode.
i want to increase the value of "height" when someone visits website from XS or mobile devices.
i"m using bootstrap 3.3.7 in my project.
Defining Proper Media Queries
Bootstrap has clearly defined breakpoints for different kinds of
devices, specified by using CSS media queries. The following are the
breakpoint categories used for the different types of devices:
Extra Small Devices (e.g. cell phones) are the default, creating the “mobile first” concept in Bootstrap. This covers devices
smaller than 768px wide.
“Small Devices” (e.g. tablets) are targeted with #media (min-width: 768px) and (max-width: 991px) { ... }.
https://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
Related
I am using #media screen and (max-width:768px) to change the view of my website on mobile but when I rotate to landscape mode it changes to desktop website meaning it shows content which was hidden using
#media screen and (max-width:768px). How can I avoid this?
What #media screen and (max-width:768px){ ... } does is it will only apply everything in that block if the device the user has has a screen of a width of 768px or lower (taking into consideration double pixel density etc, but that a whole other can of worms)
So when you turn your phone sideways it's height becomes it's width and since that is more than 768px, it does not apply your "mobile layout".
One option would be to increase 768px to a bigger number, or even split some of the rules for smaller and higher widths, like for example having rules for max-width: 640px and for max-width: 960px
I am currently designing the home page of my website and I want to make a responsive website with 5 hexagon-shaped images, 3 on top, 2 on the bottom. So I created a container with a width of 90% and a height of 65vh it responds nicely to different screen sizes. I then made my 5 hexagons and set up the dimensions for my images, it looks fine on the mobile devices in chrome developer tools but you can see my hexagons appear bigger on ipad sized devices and becomes too big of an issue to ignore with laptops and bigger. Thats not the issue as I can change that by using #media queries.
I then decided to check all the mobile devices dimensions before I do #media and it works great for devices whose height is greater than or equel to the device width but my bottom 2 hexagons leave the screen if my device width is greater than the height. I have tried different approaches and I'm encountering the same issue. Its like they adjust to the change in screen width but not height.
I found out the problem was I needed to design the website for landscape mode because obviously asmaller height and larger width is landscape, Ill throw up the media query in case anyone stumbles on it:
#media (max-width: 1024px) and (orientation: landscape)
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following queries on my WordPress theme, and they are alot ;/
I am new to WordPress so i can't understand them correctly, but i am sure i will understand your explanation .
here is what I don't understand.
1: I don't understand for which screen's they are.
2: I don't understand what the "max" ( this one is very strange )
3: will the max width terminate the setting or something ? because we have min 600 and max 600
here is the code.
1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as
#media (min-width: 312px)
Just you are specifying that you want the max-width of the screen on that the website loaded, that's it
2) the max means the maximum width of the device screen to which the following styles are applied.
for eg:
#media screen and (max-width: 768px){
//These styles will apply only if the screen size is less than or equal to 768px
}
3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)
Screens are not printed on paper or read out through a speaker. They are screens like the ones on a smartphone, laptop or monitor, and the rules apply to all of them (which also meet the and condition).
Max is a standard English term. The rules apply unless the width is more than the maximum defined. It won't terminate anything, the rules inside it just apply when the condition is met.
because we have min 600 and max 600
… with different sets of rules. Some apply when the width is at least 600px and some apply when it is no more than 600px.
With mediaqueries you can determine on which resolution your styling will be applied max means if the screen size is bigger than your number the styling in the media query will not be applied. Same with min if screen size is lower than your number styling will not be applied. Screen means that you styling will be applied when the medium has a screen for example you could write print than the styling will only be applied if you print your website.
A media queries detect media type which are currently using your
website in this case is screen so any device - you can also put
specific css for print - to make your website be print friendly.
Using Media Queries are core of RWD - responsive web design.
min-width its saying browser 'please use this block of css rules if viewport of your browser is min 312px so basicly every device
which has viewport size bigger than 312px.
max-width its saying please do this block of css rules if viewport of device is bigger than 456px - so all devices which has
455px and less will not run this css rules.
There is also state like #media screen and (min-width: 200px) and (max-width: 1000px) {} - its targeting devices which has more than 201px and less than 999px of viewport size.
Links:
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
The media-queries are basically a simple if statement on other programming languages.
screen: The screen is used to define the rules only for computer screens, tablets or smartphones. There are other media-types like projection or print.
max-width: specifies the maximum width of the screen (or media) for the CSS rules. All rules in this part are for screens lower and equals the value.
min-width: specifies the minimum width of the screen (or media) for the CSS rules. All rules in this part are for screens larger than the value.
Example #1 (using min-width):
#media screen and (min-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a minimum screen width of 456 pixel.
Example #2 (using max-width):
#media screen and (max-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a maximum screen width of 456 pixel.
CSS3 Media Queries: https://www.w3.org/TR/css3-mediaqueries/
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.
Hopefully this guide will help you understand how this works: Link
You should also check out this guide to the different screen sizes:
Link
When i read about responsive design, people always seam to use this statement:
#media screen and(max-width: )
But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?
Thx ;=)
The screen resolution does not matter. The value used in media queries is the device width. For example:
My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:
/* Even though my phone has a screen width of 720px… */
#media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
#media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.
You can't directly query physical size.
You can, however, perform a media-type query for DPI along with Height and Width.
Example
#media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
This should be a good starting point: List of displays by pixel density
Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.
Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.
See Viewport Device-Widths for a list of common mobile screen sizes.
When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.
If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.