I found this post on Bootstrap Tutorial for Blog Design.
I am planning to use it for one of my project for the responsive layout that it provides.
I have found an issue in the page hosted for demo.
have attached a screenshot
The first post in the page "Facebook Timeline Design using JQuery and CSS" is falling outside the border of the background [Have marked it in blue].[not the expected result]
The rest of the posts in the page falls inside the border which is the expected behaviour[have marked it in green].
Is there any way I can fix the issue of the first post falling outside the background border. I have tested this in IE,firefox and chrome with the same results.
have created a jsbin page here
You can get it resolved by using jquery selector
$('.row > [class*="span"]:first-child').css({"padding-left":"20px"});
In the css files its stated that the first span-element to have no margin on the left.
bootstrap-responsive.css on line 232:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
bootstrap.css on line 419:
.row-fluid [class*="span"]:first-child {
margin-left: 0px;
}
Remove or comment these out.
Add this stylesheet (prefered at the bottom)
.row > [class*="span"]:first-child {
padding-left: 20px;
}
If you want you can add this jQuery
$('.row > [class*="span"]:first-child').css('padding-left','20px');
Related
I'm having a problem in the mobile version of my desktop. It's an edited versione of the classic theme for prestashop 1.7.6. Here's a link to the website.
In the footer, I have 2 consecutive divs, each one with its content. The first div has the block_myaccount_infos ID, the second one has the block-contact class.
The first div has a custom JS which should display the dropdown content, similar to the two sections before that. Since I noticed that the JS wasn't being executed, I used the chrome inspector tool, and I found out that the second div is overlapping the first one.
I tested adding a tag inbetween, which works, but it's not a valid solution to me since i need the two divs to be on the same line in the desktop version.
I see that you have
#media (max-width: 1025px)
#footer #block_myaccount_infos {
width: 34%;
display: inline-block;
float: left;
in your css. The issue is caused by that float: left;
If you alter or removed that and the <br> in your HTML, it should fix your issue. Hope that helps.
I have an image slider on a website I am currently working on:
http://scientized.com/ (first part on the main page)
As you can see it works beautifully. Now I am trying to put the same image slider on a page:
http://scientized.com/mathematics/
As you can see it becomes slightly misaligned. The images do not slide edge to edge. I have been at for some hours now and cant seem to find where the problem is occurring.
It is a wordpress site, and the slider is a widget I've been working on.
All content is currently dummy content - don't read too much into it.
Anyone can spot the error in my css code?
Your ul has a margin on it on the faulty page. Change to this ...
.entry-content ul {
margin-left: 0 ;
}
But be aware it will affect other ul on Wordpress pages. Target a different class if possible.
EDIT: it's in your code as .entry-content ul ul
EDIT 2: you can target .slides, like this:
.slides {
margin-left: 0;
}
I've created model popup by using Bootstrap.css.
It's coming properly in Chrome, but in IE(9,10,11) modal padding-bottom is not getting applied and creating UI issue.
There is no space between buttons(submit and cancel) and model at the bottom of the page
And I've created the mock view in plunker.
I unable to find the fix for IE.pls let me know how to fix this issue
Instead of giving padding-bottom, keep submit and cancel buttons in a div and use padding for the div,i think it will be perfect and Solves your problem.
Just add the following class to your css:
.btn-fixed-inner { padding-bottom: 15px; }
This might help:
.modal-body { margin-bottom: 15px; }
I am having a problem in combining my website (based on bootstrap) and a webmap based on leaflet. The Mapbox tiles are shifted vertically.
I think that the issue is due to a conflict between the two .css (bootstrap and leaflet) files.
Here the link to my webpage. http://www.geo.uzh.ch/~fkaelin/Ex03.html.
I would appreciate any suggestion.
Many thanks!
This is kind of weird because i have used Leaflet and Bootstrap together numerous times and never seen this conflict. But, you're right, there is a conflict:
bootstrap.css:
img {
vertical-align: middle;
margin-bottom: 0px;
margin-top: 60px; /* here it is */
}
Your bootstrap.css put a margin-top of 60 pixels on every image in your page. This also affects the images in your tilelayer. You could counteract this by using some custom style:
div.leaflet-tile-container > img {
margin: 0;
}
But i'm guessing you'de be better redownloading bootstrap or using it from CDN because i'm not seeing this problem in this Plunker:
http://plnkr.co/edit/fHtNdt?p=preview
Also uses Leaflet 7.3 and Bootstrap 3.2.2, i'm kind of baffled.
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}