Not a frontend developer just trying to use the template in my Django project.
I tried customizing the CSS of SB Admin 2 Theme using sass but I'm having trouble locating the right elements to edit. I went into the CSS (Github) it's all messy I have no idea how to deal with it. I put it through the sass compiler but no luck there. I will really appreciate it if someone can help.
All I want to do is:
Make the sidebar fixed in collapsed state and un-toggleable.
Regarding your first issue
Make the sidebar fixed in collapsed state and un-toggleable.
The following should do the trick:
body{
margin-left: 6.5rem;
}
.sidebar,.sidebar.toggled {
width: 6.5rem;
overflow: visible;
position: fixed;
left: 0;
height: 100vh;
max-height: 100vh;
z-index: 9999;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
display: hidden!important;
visibility: hidden!important;
-ms-overflow-style: none!important; /* IE and Edge */
scrollbar-width: none!important; /* Firefox */
}
#sidebarToggleTop {
display: none!important;
visibility: hidden!important;
pointer-events: none!important;
}
This goes at the end of your style.css file. Tell me if that's working for you.
Regarding your second issue
Blockquote Make the box with area graph flex width so I can replace the graph with a table tag.
I'm not quite sure I understand, could you go in more details.
Related
Does anyone know how to fix this issue when using AOS as animation in web?
i have tried below code but nothing change and make the aos animation disabled.
im using tailwind (flowbite) as css framework.
:root {
overflow: hidden;
height: 100%;
}
body {
position: relative;
overflow-y: scroll;
height: 100%;
}
When I go to bottom of my website, I can't go back to top with the scrollbar. What might be the problem?
and I also have some errors on the browser console.
#wise-ticker .owl-controls,
#wise-ticker .owl-item {
padding-top: 10px;
}
.wise-ticker-title {
float: left;
display: block;
padding-left: 20px;
}
http://londonpostjournal.com/
Apply this code in your general stylesheet
html {
overflow-y: scroll;
}
Hope this will works for you.
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
I'am a beginner of this kind of work. So please be patience!
My Header is a bit messy in Firefox, IE and mobile safari. The logo displays huge and over the nav bar. I manage to fix it by adding overflow: hidden;.
Its a wordpress site.
But it still doesnt displays in the right way.
This is what ive done to fix it.
.logo-wrapper {
line-height: 2.5ex;
height: 90px; /* 2.5ex for each visible line */
overflow: hidden;
/*Option 1: display: inline */
/*Option 2: overflow: auto; */
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
What im I doing wrong?
Check out the site: http://bit.ly/1akopZL
Best regards.
Try simply adding the following to your CSS:
.logo img {
max-height: 100%
}
I gave this a text and it should do the trick.
Edit: taken responsiveness into consideration.
I use this style information to make my footer stick to the bottom of my web pages and it works super in FF, Chrome and Opera. Only in IE, the footer appears in the middle of the page instead of at the bottom.
body { margin: 0; padding: 0; height: 100%; font-family: Georgia; }
#parent
{
min-height: 100%;
position: relative;
}
#header { position: relative; left:0px; top:0px; width: 100%; height:45px; background-color: black; }
#content { padding-bottom: 150px; position: relative; }
#footer { position: absolute; left: 0px; width:100%; bottom: 0; height:80px; background-color: black; }
The HTML structure is as follows:
HTML body tag
parent
header
content
footer
Update
I figured if I add a conditional this selector for IE, it works in both browsers.
#parent { height: 100%; /* min-height: 100%; */ }
Now, would someone please tell me if it is legal to add a conditional CSS comment in a .css file that is included as an external in an HTML file? I guess not. How do I go about using this conditional comment without using an additional IE only CSS file?
This should help:
html {
height: 100%;
}
Take a look in the source code and try it on any browser: Footer at the bottom of the page. It works on IE7, IE8 and IE9, only IE6 and under will not becouse of min-height property. I think putting correct DOCTYPE will fix your issue. Hope that helped.
I had the same problem a few weeks back and a found a pretty good tutorial on this. Click here! The general idea behind this solution is to create a wrapper which soaks up most of the page, leaving only enough room for your footer to be positioned at the bottom of the page. This trick definitely works in IE.