When I set grid using css-grid and use vertical height limit: height: 90vh the content in the (parent div)cards (cards are derived from Quasar framework but any other seems to show similar behvariour) is flowing over on smaller screens. Is there a way to set the content to fill the required height but if the screen is smaller then disable that limit?
Here is codepen that shows this behaviour
https://codepen.io/pokepim/pen/wvaYNXp
So the main thing is that on big screens I would like to keep all the content on the screen (all those cards that you see in the codepen)- no need scroll. However on smaller screens maybe the content should become scrollable.
Use media queries
Exemple
#media handheld or (max-height: 800px) {
.div4{
overflow-y: scroll;
}
}
#media screen and (min-height: 800px) {
.parent .div4 {
height: 550px;
}
}
Related
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
I'm using a Grid B as outlined in the documentation. I'm wanting to know if it is possible to use css media queries to change from a Grid B to a Grid A without using javascript/jquery?
According to your needs, I have set the Grid B layout same as Grid A on device-width between 500px and 900px. When the layout enters that zone, "Block A" and "Block B" will take half of the space of total Grid. And Block C will take the entire width of Grid and will go down automatically.
#media screen and (min-width: 500px) and (max-width: 900px) {
.ui-grid-b.ui-responsive .ui-block-c {
width: 100%;
}
.ui-grid-b.ui-responsive .ui-block-a,
.ui-grid-b.ui-responsive .ui-block-b {
width: 50%;
}
}
FIDDLE here
Hope, you get the idea!
Im using the bootstrap 2.3.2 css framework to set out the interface for a web app. Im using the responsive version of the framework.
The application dosnt need to be mobile + tablet responsive, but im using the responsive version so the interfaces scaled horizontally on wider monitors (a large part of the UI is tabular data so users with bigger screens will appreciate being able to use the full width of their screens).
Is there a way i can use the responsive features of bootstrap, but stop them being responsive after a certin point - ie. at < 1000px the interface would no longer be responsive (a user could still make it larger, but not smaller)
Essentially i want to stop the span and offset elements that make up the grid scaling after <1000px
I have modified Bootstrap to not include the responsive features for devices under 1000px.
This example should demonstrate this: http://floating-wildwood-8562.herokuapp.com/examples/grid.html
You can use this modified responsive bootstrap css file here.
This required two changes to Bootstrap's LESS files and a rebuild of the framework.
Shown here and here
You may also decide to add this to your css:
html, body {
min-width: 1000px;
}
This way the window will be forced to be at least 1000px.
Haven't used bootstrap, but it must have a css, u should see how u called your main wrapper and at the end of it add.
#media screen and (max-width: 1000px) {
#main_wrap {
width:1000px;
}
}
I re read your question and this is what you have to look for example, you keep the main wrap at 100% width, but theres some elements like image wrappers text wrappers, etc... so... look for all of them in the css (not media queries) and place a min-width... example
/* ------ NORMAL FORMATTING Examples */
#img_wrapper {
min-width:300px;
}
#text_wrapper {
min-width:400px;
}
#logo_wrapper {
min-width:100px;
}
/* ------ Media Queries */
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
}
why this U don't have to query them when they achieve to that min-size they wont resize anymore, they will stay that size even. if the screen keeps resizing.
I hope this helped
If you wanna query them then don't put a min-size just give them a exact width
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
#img_wrapper {
width:300px;
}
#text_wrapper {
width:400px;
}
#logo_wrapper {
width:100px;
}
}