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.
Related
So I am trying to hide two of the six user photos (the last two) when on a mobile/small screen. I know, I will use an #media code but what code would I write that would hide the last two photos?
The code on my site is quite extensive, so it would probably be easier to visit the page in question and use "inspect" to see the code. I have tried to hide the img(s) with some css code but it didn't work. So I have no idea what I am doing wrong! See the page in question # Zoeaa.com
Would really appreciate the help and feedback!
If there is anything, I can do to improve this question, please let me know!
Photo of the issue
Something like this
//for screen size smaller than 768px (mobile)
#media only screen and (max-width: 768px)
{
//hide the last two list items
.pop_members ul li:nth-last-child(-n+2) {
display:none;
}
}
This will hide the last two list items from the list when the screen size is smaller than 768px.
Maybe you can do it like this. I always use this method when I want to hide something on the webpage, with this you can hide any element you want
but it still depends to the structure of your code. there are many ways to hide an element. I hope this helps you!
#media only screen and (max-width: 768px) {
//Create Class that will only hide on mobile size.
//Add the class desktop-only to the image(or LI) that you want to hide on mobile view.
.desktop-only {
display: none;
}
}
I have an element that is attached to the bottom of the screen correctly. using bottom: 0
however, when I move into mobile view I still want it roughly the same height but I want to be able to scroll down to view the rest of the element, almost feels like I need to remove the bottom attribute
I'm using media queries but not sure how to get the desired effect I want. coz if I remove bottom from the media query, it will just carry on applying it
any ideas?
Use media-query:https://www.w3schools.com/css/css_rwd_mediaqueries.asp
See here sizes:https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
#media only screen and (max-width: 768px) {
yourElement {
bottom: unset;
}
}
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
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 { ... }
}
I'm working on a site:
sites.northwestern.edu/mrsec
And when the browser becomes iPad size (1024 px), part of the navigation menu goes below the rest of the menu and for some reason it is not contained within the background color, and the font is white, so people can't see it. when the browser is made even small enough, the part of the menu that is below the rest is wrapped by the same background color (gray), but until then, people can't see the part of the menu that is below the rest of the menu. How can I fix this using CSS or any other language? I'm using a wordpress template, I don't have access to the php or template files because the school does not give us that access.
You should create a media query to target the screen size you want then add a style to reduce padding and font-size so that every menu item gets displayed.
In your case it would look something like this:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.main-navigation a{
padding: 0 15px;
font-size:14px;
}
}
See this screenshot of the result.