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.
Related
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.
URL: http://bit.ly/1GUzfPx
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: #201E24;
}
.grid-view {
width: 100%;
overflow: hidden;
}
.library .list {
overflow: hidden;
padding-top: 0;
}
Although my page structure and CSS is quite simple but I just can't find whats blocking the scroll on Chrome and Android. Been scratching my head over this for a while now.
Now that you have removed overflow:hidden in media="all" body, .ionic-body please try the following:
Add height:100% to html,body
Remove height: 1052px; from the inline styling of content has-header grid-view
And hopefully that sorts it out.
I am not sure if I got your problem, but try this.
.library .bar-clear{
background:#35323A;
position:relative;
}
.has-header{
top:0px;
}
I am trying to get my basic webpage layout together and I hit a few problems. Could someone please help me solve it. My understanding of CSS is not superb.
Code: http://jsfiddle.net/HJLzt/
The sticky footer is working, and I want to have a column left and right of the page in between header and footer. I'm not sure if the way I did it is correct.
Between left and right column and header and footer I would like to put the content. How do I center it. I cannot find a proper way, as there is always overflow and I want it only to go between the left and right column and nothing to cut off.
Thank you for your help!
EDIT:
I have updated my layout and used a bit of jquery to help out. I know I should try and make everything work in css, but it seems impossible.
Maybe I should add, that I want a whiteboard as theme. I want a wooden frame, so the sidebars always have to connect to the header and footer, as the top and bottom frames go through there.
If somebody could have a look and tell me if that is ok or not.
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#main header{
height: 100px;
width: 100%;
background-color: #5d3be6;
}
footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color: #afeba4;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#layout_left{
float: left;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#layout_right{
float: right;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#content_layout{
border-left: 100px solid #e4f662;
border-right: 100px solid #e4f662;
width: auto;
height: auto;
background-color: #c36161;
}
#content{
margin: auto;
width: 96%;
}
As you've stated you're new to CSS but I'd very much recommend against your layout, it's seemingly 10 years ago standard. (no offense intended ofcourse, you're new to this, you're not going to know the do's and do not's as of yet).
Research online portfolio examples using google for ideas!
to answer your question:
I recognise your sticky footer code, I didn't work for me either, well not completely.
It doesn't work great, I'd recommend: http://css-tricks.com/snippets/css/sticky-footer/
I'd tell you myself but that tutorial is very well written and easy to understand and implement.
And for centering container use:
margin: 0 auto;
centering text you can use:
text-align: center;
Hope that helps.
I am trying to make my subnav list display horizontally rather than stacked. I have tried a few different things, but I cant figure it out. I have tried to use Float, but it messes with the width of the divs below it. Not sure why this happens.
Can anyone help me?
http://jsfiddle.net/9bued/1/
Delete the width limitation (width: 10em;) in #navwidth
Delete the width limitation as Habib suggested, then add a clearfix class to the containing ul.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
The styles for the clearfix should always go at the bottom of your style block or style sheet.
just add to your CSS : display: inline-block;
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.