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
Related
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 ?
On the docs page of mini.css https://minicss.org/docs#modal-dialogs , there's a modal dialog example. It works, and everything's fine, just the size (width to be precise) of the dialog seems to be constant, regardless of the screen size. It's very short, even on quite wide screens. Is there a way to make it wider (e.g. to take 70% of available space)?
Perhaps the problem is trivial, yet I'm not a CSS expert. I've checked the size of div elements, and they are set to 100%. Just the modal part is rendered so small.
It is using a media query , Override that media query.
media screen and (min-width: 320px)
.card {
max-width: 70%; //try !important tag if does not work without it.
}
Or probably define your own media queries.
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
How do I write conditional statements for CSS?
I've seen all types of information from
if {...]
#when
as well as #media.
I want to write code for the social (tertiary) buttons to move towards the middle of the page when my site is viewed on smaller screen. I currently have two rows of menu buttons for smaller screens, making the social buttons disappear. I've been reading on various types of syntax but am not sure how to form this.
Thanks
There's no if else in CSS. There is if you are using Blogger. If I want to display something in a mobile screen, I would add this block of code to my css:
#media only screen and (min-width: 480px) and (max-width : 1600px) {
.tertiary-menu {
display:none;
}
}
#media only screen and (max-width : 479px) {
.tertiary-menu {
display:block;
}
}
This means that a screen smaller than 479px. You can add and (min-width: <size>px;) to set a min and max range on when the element should show up.
If you want to click on something to show the menu, I'm afraid you have to use Javascript for that. There are ways to display menus using CSS, if you could check the search bar here: eatingisliving.com. It uses CSS to expand the search bar. Some items also disappears when the screen is resize. To use CSS to show other elements, you can use something like .secondary-menu:hover ~ .tertiary-menu { } or .secondary-menu:focus ~ .tertiary-menu { } but it's limited to sibling or child elements only. Only the parent element or a sibling before the target element can trigger it.
If you could provide your codes and more details. I can help you fix it.
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
}