I don't know what I did, but I either shifted my header and nav to the right or the rest of the page to the left. Using tw bootstrap. I can't figure it out. I've fire-bugged it and looked through my css edits and don't see any negative margins (is what I suspect).
http://skeeterz71.com/auto
If someone could help me out I would appreciate it. What should be showing is the header logo and top nav and the rest of the page should line up on the left and top nav right with the right side of the page.
Thanks
T
I'm not entirely sure what it is you want to achieve, but from what I'm guessing, adding these CSS changes might help:
.span12 {
margin-left: 0;
}
.span6 {
width: auto;
}
#social-wrapper {
float: right;
}
ul.nav.pull-left {
margin: auto;
width: 100%;
}
.topNavRow {
margin-left: 0;
margin-right: -11.5%;
}
#media (max-width: 1200px) {
.topNavRow {
margin-left: 0;
margin-right: -8.5%;
}
}
(You can just add that styling to your Main.css) - if that helps :)
Related
I've tried a bunch of ways to remove this margin on the right of the YouTube Livestream page.
I'm doing this for an extension I'm working on and I'd like the margin to be removed completely from page.
I've already done the following:
margin: 0px !important;
It removed the margin on the left side of the page, but there's still a big chunk of margin on the right side and I have no idea how I should remove it.
Any help would be much appreciated.
The other margin spacing is actually on the elements directly inside #columns, which is #primary & #secondary. Overiding those extends width to the window edges.
div#columns {
max-width: 100%!important;
}
div#primary {
margin: 0!important;
padding: 0!important;
}
div#secondary {
padding: 0!important;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
}
I'm hoping for some enlightenment from a CSS whiz. Take a look at the bottom of any page at http://oicjapan.org - the address/phone info section would look a lot better in the center of the page, but I can't seem to get it to go there. Setting text-align:center on aside#footer-sidebar or div#fsidebar just centers the text inside the <li>, while the whole thing stays on the left side of #wrapper. And margin-left:auto; margin-right:auto; doesn't have any visible effect on any of several elements I tried (#footer-sidebar, #fsidebar, or #fsidebar-ul).
I'm not limited to CSS changes - if the markup needs to be changed, I can do that.
Remove float:left; from #hsidebar .widget-container, #fsidebar .widget-container or you can overwrite this rule using this:
#fsidebar #text-4 {
float: none;
text-align: center;
}
Then, remove float:left; from #fsidebar #text-4 .textwidget > div > div or overwrite it with this rule:
#fsidebar #text-4 .textwidget > div > div {
display: inline-block;
float: none !important;
}
Hope this will works!
If you want the block centered to the page, you will need to add a width to your #fsidebar such as:
#fsidebar {
margin: 0 auto; // does the same thing as margin-left: auto; margin-right: auto;
width: 400px;
}
If you are wanting the block to be moved inline with the right-column of your web page, why not just margin / pad the block over? Something along the lines of:
#fsidebar {
margin-left: 350px; // use whatever looks to your liking
}
Hi here's the code to center the footer text on your website, for a
#fsidebar {
text-align: center;
}
.widget-container {
margin: 5.0%;
}
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
I have this site header I'm working on but I can't get the logo and the site title to line up horizontally. I'm relatively new to CSS so would appreciate any hand-holding anyone can offer please ;-)
The logo image is styled with:
.logo {
float:left;
}
Whereas the h1.site-title and h2.site-description text is styled thus:
h1.site-title, h2.site-description {
position:relative;
margin-left: 130px; !important
}
I'm pretty sure I need to make another DIV and can't get the positioning right so the logo is at the left, then immediately next to it the site title/description.
(it should be #logo) Floating them both left works
#logo {
float: left;
}
.home-link {
float: left;
}
and remove the margin-left
There are a couple of things that I would recommend changing:
In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
Avoid using !important whenever possible. It makes your code very hard to adjust later.
instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
remove the margin-left.
so your CSS would look like this:
#logo { float: left; }
.home-link { float: left; width: 75%; }
I am Using Wordpress, Twenty Eleven child theme.
I had an issue where all my divs moved when I re sized the page. After persevering I managed to work it out by adding a wrapper around my body html mark up. This stopped all the divs moving when the page was re sized.
#site-wrapper{margin: auto; margin: auto; width: 1000px;}
However I have added five widget areas which run across my footer
One | two | three | four | five
But when the page is re sized the widget areas stack on top of each other
One
Two
Three
Four
Five
Everything else renders correctly.
I have tried adding a wrapper round the footer with { margin: auto; margin: auto; width: 1000px; }, this did not work widgets still stack
I have also tried positioning relative / absolute to the widget items themselves, and the wrapper without success. I think it has got something to do with
float: left;
on the widget items but I cannot see a way round this? Hope someone can guide me in the right direction!
Thanks in advance, my CSS below for the widget item is below
/* Footer Widget Areas */
#supplementary {
border-top: none;
width: 80%;
padding: 1.625em 7.6%;
overflow: hidden;
}
/* Three Footer Widget Areas */
#supplementary.two .widget-area {
float: left;
margin-right: 2.7%;
width: 17.78%;
}
#supplementary.two .widget-area + .widget-area {
margin-right: 0;
}
/* Three Footer Widget Areas */
#supplementary.three .widget-area {
float: left;
margin-right: 2.7%;
width: 22.18%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
margin-right: 0;
}
#supplementary.four .widget-area{
float: left;
margin-right: 3.7%;
width: 22.18%;
}
#supplementary.four .widget-area + .widget-area + .widget-area {
margin-right: 0;
}
#supplementary.five .widget-area{
float: left;
margin-right: 2.9%;
width: 16.7%;
}
#supplementary.five .widget-area + .widget-area + .widget-area + .widget-area + .widget-area+ .widget-area{
margin-right: 0;
}
This is not a bug. This is by design. WordPress 2011 is a responsive theme intended to look good on any size device. Smaller devices do not have space to render widgets alongside the main content so this theme, along with most other responsive themes, moves them below the main content on small screens.
Overriding this functionality seems incredibly counter-intuitive. If you really don't want a responsive design (and in this day in age, you should want one) then you should probably opt for a parent theme that is not responsive.
First thing off the bat I saw was that this line of code
site-wrapper{margin: auto; margin: auto; width: 1000px;}
needs to be
site-wrapper{margin: 0 auto; width: 1000px;}
next thing to try is using whole percentages, browsers dont like fractions and instead they tend to round... try adjust the width to whole numbers whose sum is equal to or less than 100.