I have a problem getting my sidebar responsive - css

I created this sidebar with reactjs and with a certain fixed number of px for each element this caused the sidebar to not be reponsive. Unfortunately I'm not that good at CSS. Can someone help me transform this code to reponsive please ?
thanks in advance :)
code is here
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
code

Use max-width in your sidebar.css instead of max-height.
#media screen and (max-width: 600px) {
.sidenav {
padding-top: 15px;
width: 100px;
}
.sidenav a {
font-size: 14px;
}
}

Related

How can I move the Shop Page Title to the left? (Woocommerce+Custom theme{minimog theme})

I’ve tried everything and it just won’t work.
This was my last attempt.. but it didn't move a pixel
#media screen and (min-width: 769px) {
.shop #fullscreen-header .featured-slide .entry-title {
float: left;
margin-left: 150px;
}
}
Could someone please, help me with that?
Our shop page using minimog is posher.com.br/shop
Thank you in advance!
You could use flex.
.heading {
display: flex;
}
This is how it looks on my side.

How do I correctly use Media Query to cause one column to disappear and the other to adjust to the width of the screen?

In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}

how to override #media (max-width) using stylish

Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:

problems with media queries on my website

I wrongly edited some code in css media queries a time ago and now on mobile devices the logo of my website look like this:
.
The url of my page is: SplashYourCash.com
I cant get it to back to fill out the right space, maybe someone of you has an idea?
much greetings,
herrsocke
If you add the following CSS to your mobile media-query:
.navbar-toggle {
margin-right: 0;
}
It should fix it.
Try this at the bottom of your style.css file
#media all and (max-width: 380px) {
.logo {
height: 62px;
}
.logo.logoshrink {
height: 50px;
}
.navbar-toggle{
margin-top:27px;
margin-right:0;
}
.navbar-toggle.mt8{
margin-top:8px;
}
}

How to center align element in mobile version?

I tried to modify some element with the following text "Connect with Deepak" in my page but without little luck. Please help me to edit the CSS:
#media (max-width:560px) {
.vc_sep_holder .vc_sep_holder_l {
max-width: 320px;
margin:auto;
}}
#media (max-width:560px) {
.vc_sep_holder .vc_sep_holder_r {
max-width: 320px;
margin:auto;
}}
The two line always appear in mobile. Can someone provide advice to where I make mistake?
add this in your media query: .vc_separator.vc_sep_double {width:100%;}
This solved my issue. Thanks to everyone !
#media (max-width:560px) {
.vc_separator.vc_sep_double {width:100%;}
}
I would suggest trying margin: 0px auto
Edit:
.vc_separator.vc_sep_double .vc_sep_line {
border-bottom: 0px;
}

Resources