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;
}
}
Related
First of all thanks to anyone who responds. I'm sure this is a no brainer for a CSS wizard but for me it's definitely not something I have experience with, hence the question.
On my website I've got all of a sudden a horizontal scroll appearing on mobile (which was NOT there before and no CSS was edited for that).
In addition to checking on my phone, I also check via an emulator# http://mobiletest.me/ (seems like it's there on tablets too). Does anyone know how to fix this?
Not sure if it's some WP plugin or theme working weirdly with the newer version of WP, but basically here's the CSS file's contents (it's pretty big).
https://justpaste.it/8v9yy (should be easily searchable & readable). I wanted to put it here but there's not enough space.
Thanks!
While there may be other issues causing that problem, such as elements extending beyond the body, you can solve the problem by hiding overflowing elements.
body, html {
overflow-x: hidden;
max-width: 100%;
}
Note: If elements within the page are overflowing they will be cut off. So, you must ensure that they are not overflowing by doing something like below:
.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}
Update:
After looking through and testing out the CSS, it looks like the website behaves how you want it to when you make the following changes:
#media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
.typology-section {
/* this makes all the text fit in the view */
width: 80%;
/* the ad is wide, so this cuts it off at a certain point so no need to scroll */
overflow-x: hidden;
}
}
I found this out by using Firefox's dev tools to pick an element (ctrl+shift+c when you're in Inspect Element panel), namely the one going out of the view, clicking on it, and editing the CSS in that panel to find what was causing the problem.
Original Answer
I tried it out, and it looks like the ad at the top of the page is what's taking up a lot of horizontal room and forcing a horizontal scroll bar. Can you try and manipulate the ad with CSS? If so, I would do something like this:
#media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
.advertisement {
max-width: 300px;
}
}
This makes it so that when the screen is a certain width, a max width is applied to the ad.
By the way, if you're using Chrome, you can see the mobile view by opening Inspect Element (ctrl + shift + i) and then toggling the device toolbar (ctrl + shift + m). Just wanted to throw that in there to ease the amount of work in checking the mobile view!
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
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.
I have made a menu bar but when i re-size the window the menus leave their position. I want them to auto adjust please suggest how i can achieve this.
here is my fiddle link:
[Fiddle][1]
[1]: http://jsfiddle.net/c9ssy2dj/
look at this fiddle i made for you:
http://jsfiddle.net/0w8t31k9/
however you have to edit it because i made it real fast from something i made.
mediaqueries look like
#media only screen and (max-width: 770px){
/* css you want to overwrite */
}
you can find the documentation and the script here: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
is there a way to have text resize as the browser gets smaller for liquid based design in percentages.
images divs etc, all rescale but text percentage scaling its not possible! setting it in percentages just changes the unified em setting for that text - in every browser width identicaly.
Other than using media queries at specific intervals, I'm not really sure.
The way I would do it:
.content {
font-size:16px;
}
#media all and (max-width: 800px) {
.content {font-size:14px;}
}
#media all and (max-width: 600px) {
.content {font-size:12px;}
}
#media all and (max-width: 400px) {
.content {font-size:10px;}
}
No javascript, pure CSS.
I believe this is exactly what you were looking for:
http://css-tricks.com/viewport-sized-typography/
Yes, it is possible to resize text by handling the onResize event with JavaScript code. There are quite a few issues with onResize, though, including debouncing, which can get complicated.
I know this isn't part of your question, but I wonder if it's a good idea to resize text. After all, the user has already told the browser s/he's happy with the text at its current size. Is it really all that friendly to override the user's manifest preference?