I am working on a problem, where I do not know how to make the last element visible when screen is resized. It is best explained in the video below
https://imgur.com/IG1rqnL
I am using Chakra-UI, but if this could be solved using raw CSS, that would be a great help. Can someone point me in the right direction? Thanks
You can try add a max-height to your element :
.yourMenu{
max-height : 70vh;
overflow:auto;
}
It will add a scrollbar when the element is too small. That's the easiest solution.
You can also go further using media screen and set a special param for "small height devices" :
#media screen and (max-height: 700px) {
/* Some special "small height screen menu display here */
}
Like maybe reduce font-size ? Padding ? break menu in 2 parts ?
Related
Is it possible to hide a div with (or without) Bootstrap 4 if the screen width is over/under a specific value? Does it need javascript for that?
More specifically, I'm looking for hiding a specific text (that I find useless on a mobile screen). I tried classes like "hidden-sm-up" but I couldn't make it work. Sorry if it's a basic question...
media queries in CSS are what you are looking for.
.mydiv{display:block; /*default behavior*/}
#media only screen and (max-width: 400px) {
.mydiv{display:none; /*hide div on all screens with 700 and lower width*/}
}
(try dragging the divider between js and outpuut block)
https://jsfiddle.net/qaabhmou/
more you can find here:
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
When I resize the screen of the browser on Google Chrome (I haven't tried on another browser) the value shown is wrong. It makes my work harder when I have to use a media query. I can't find any answers about it. Even if the issue is restricted to Chrome, I would like to know why this happens.
Doesn't match with
#media screen and (max-width: 1067px) {
//do something
}
for example.
EDIT: When I resize the screen to see if my layout broke at a certain width and pick the width shown to use in my media query the query doesnt run at that browser width, but if i put something like 200px more it works but i lose precision.
Using the previous example:
Suppose that is not google site, is my site, and on this width (1067px)I need to center a div.
If I try:
#media screen and (max-width: 1067px) {
margin: 0 auto;
}
It wont work at the specified value (1067px), but if I put something like max-width: 1267px will work but losing precision.
I dont know exactly how much in px is the variation but is around 200px.
The example of center a div is only an example, the fact is: Nothing specified on the query at 1067px work, if I decrease further will work, but too late, forcing me to increase the 1067px to 1267px to run when I want.
IMPORTANT: I have not tried other browsers besides Chrome.
#media screen and (max-width: 1067px) {
//do something
}
I didn't understand your problem well I guess, but I will explain how #media works.
If your screen has from 0 to 1067 width it will work with the css inside this #media screen. It doesn't mean it will limit your screen to some value, you must setup your page to work with max-width of 1067px.
Like this(using max-width on div's and other elements):
<div id="home>
//content
</div>
And your css would be like this:
#home
{
max-width: 1067px;
}
Hope that Helps!
I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
I'm working on a template page for a website.
It can be seen here : http://www.acielouvert.net/clos/
In the header, I have a slideshow with images width of 100%, they resize with the browser.
When I resize the browser below 960px I want div .continue to stay in touch with div.header.
Actually I put a margin-top: 700px on div .continue.
Have you any idea how can I do this ?
I don't want to use media queries.
Please see here the code for the page : http://pastebin.com/gLaerw1F
Thanks,
Guillaume
Something like this.
#media screen and (max-width: 960px) {
// What ever you want ...
}
I did some several test and the only way I found is using % for the margin-top of .continue
When user resize the browser below 960px, the two divs are stuck together and I avoid the gap due to margin-top: 700px;
I will surely add some media queries in the end but the % is helping a lot.
Thanks for your help #Junaid, #Josh Burgess, #jurgemaister.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}