I can’t for the life of me figure out how to make the sidebar fixed so it does not move when you scroll on the entire page, on desktop.
It currently has it’s own scroll wheel for some reason and I can’t figure out which part of the css to edit.
I have a #media css element set up for 955px and greater resolutions to show the sidebar instead of the mobile menu.
Here is the website: atceg.net
And the CSS: https://atceg.net/wp-content/themes/twentyfifteen/style.css?ver=5.2.4
You have set
#media screen and (min-width: 55em) {
.sidebar {
position: fixed!important;
} }
(I would assume in your WordPress customizer)
If you set it to
#media screen and (min-width: 55em) {
.sidebar {
position: relative!important;
} }
it will stay in one place.
Related
Is it possible to set width this same like container in css? OK, I'll display you my problem. I want to make side responsive menu which will be hide in mobile and visible on Desktop. So, I want to main content (on mobile) have width like their container and I will use translate in order to hide menu. For example
.container{
display: flex;
transform: translateX(-150px);
}
.menu {
width: 150px;
}
.content {
width: 100%;
}
I know that in JS it's possible to check container with and change .content width dinamically but I want to know that is better way to realize that.
You can use media queries to change the with dynamically based on screen size.
Here is the documentation on MDN, but probably something like this:
#media (max-width: 500px) {
/* Here are styles for screens equal to or narrower than 500px */
}
I'm using bootstrap carousel on my site. When opened in a phone the images are huge. Take a look at www.nwberryfoundation.org to see what I mean. Is there a way to reduce the carousel in that view?
I've tried
#media screen and (max-width: 400px) {
.carousel {
width: 75%;
}
}
Doesn't seem to make a difference.
Just use below code no need for media query and dont apply width instead try max-width
.carousel{
max-width: 300px; // u can changed it based on ur need or play with %
margin: 0 auto; // required to center div horizontally
}
i am learning CSS (but i know some stuff).
I am working on a demo webpage that i want to create with css to have a layout that i want.
Concept:
I have a container DIV which also has a top-div, left-div and content-div inside.
At first, with the help of media queries i make a layout for 3 different devices:
#media all and (min-width: 960px)
#media all and (min-width: 600px)
#media all and (min-width: 340px) and (max-width 599px)
So at the lowest #media i make the top bar position fixed to be always at the top, else it is not fixed its relative and it has some margin
The proble is i've got an icon a menu-bar icon that you see in mobile websites, i create an image tag within top-div and in css i have display: none;, width: 6%;, height: 10%; if it will work it will be awesome. But when inside the 3rd #media i type div#container div#top-div img#menu_bar_icon{ display: block; } it doesn't work!
I tried the opposite to have the default display at first (just removed the display: none from the img) and within the #media i type div#container div#top-div img#menu_bar_icon{ display: none; } and it WORKS....
I don't know why this is happening, please help me
Thank you!
Picture the following:
A navbar on top, a sidebar on each side of the page (left and right) and a content div sandwiched between those asides. Everything looks great on a desktop.
Enter a media query for a single column layout for mobile view. Now the layout is Nav, left sidebar underneath, content under that and the right sidebar under the content.
My question is how to get the right sidebar under the left sidebar for the mobile media query but leave it untouched for the desktop view, without touching the markup and only changing the CSS. Here is a link to a fiddle to show what I mean:
Fiddle
Everything for the desktop layout is inside of a
#media only screen and (min-width: 768px) { }
CSS block.
I know you've asked for "only changing the CSS". So first of all maybe there is a solution with the new css order functionality. But then why not using a much simpler way with changing the markup only a little bit (DEMO).
In the following example I've removed every piece of code not needed to demonstrate the solution in your fiddle.
You could just move the right sidebar before the content element and then float them left/right in desktop mode.
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
In mobile mode, you remove the float so that the 3 elements get back to their original "markup position".
#media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}
CSS style
is it possible to do the header and the footer contents can be depend on the resolution of a screen??
I plan for the home to be 100% size of the screen but I don't know if the contents can be resized if they resolution is big or small from the default ,especially divs and texts.. what would be the best css code that could make out the same effect, that will also be IE friendly.
is it possible to do the header and the footer contents can be depend on the resolution of a screen??
--Yes, use media queries in css to hide and show divs with separate content at different screen sizes
.header2 {
display: none;
}
#media (max-width: 600px) {
.header1 {
display: none;
}
.header2 {
display: block;
}
}