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;
}
Related
I'm having some issues in trying to fix a site that was built by some one else. Seems the previous developer some how used BootStrap which I'm not an expert. When checking the code I can see that there is a reference for a #footer class, but cannot find the exact problem. The problem is ... there are few Social Media icons, on the regular site they are click-able and working fine, but when you resize the site for responsive the images are there but the links disappear or not working ...
Any idea how to fix this problem ?
The site link is at : http://tie.com.sa/index.html
Thanks in advance ...
Fawaz
You can add some "priority" to the elements using position: relative and z-index.
The description of the footer is overlapping the icons.
Just add the properties and values as shown below into #footer ul:
#footer ul {
position: relative;
z-index: 9999;
}
new here and I'm crossing fingers for help.
I'm working on http://www.catgriz.com
On the frontpage I have a slideshow that stacks all of the information on top of itself when you initially visit the page. But after a simple browser refresh, it displays correctly.
I was hoping someone could look at it and point me in the right direction of what I've done wrong. I'm using Joomla with a Yootheme.
Thank you so much in advance!
Some sliders can produce flickering effect during page load, depending on the amount of elements in each slide, caching, internet speed etc.
You should hide all slides, except first one via css.
.slides > li {
display: none;
}
.slides > li:first-child {
display: list-item;
}
Widgetkit plugin will do the rest after page loads.
ps. Like the others, I actually didn't saw any problem on your site.
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I'm having trouble keeping text tagged with class="navbar-text" in line with other links in the navbar. Building off of the Bootstrap 3 example for a fixed top navbar, I noticed that any time the browser width is <768 pixels, the collapsible menu items shows the text without the proper spacing and butted up against the first link in the menu:
(http://www.bootply.com/98784)
The text "Business Infrastructure Services" is a <p> tagged with class="navbar-text" as recommended for text strings in navbars. It looks fine when it is not collapsed (browser width >768 pixels). And, when I try to tag the text as an <a>, the styling is fine and everything looks good. But, it's not meant to be a link, but rather a simple string of text. I've also tried moving the <p> out of the <ul>, but it still shows up weird. Any suggestions on how to resolve this would be greatly appreciated. Thanks!
Edit 12/5/13: I apologize if I was unclear in what I was trying to achieve. Basically, I'd like the <p class="navbar-text"> to appear on its own line, just like the other links in the <ul>, like this:
Edit 12/6/13: Since the release of Bootstrap v. 3.0.3, this issue is partially resolved. The text string now appears on its own line, but doesn't have the proper indentation (See https://github.com/twbs/bootstrap/issues/11735):
I'm not really sure why you're having trouble with Bootstrap's layout, but you just need to get the two types of elements' styles synchronized at mobile sizes:
Demo
#media (max-width: 767px) {
p.navbar-text {
margin: 0;
padding: 10px 15px;
}
.navbar li {
overflow: hidden;
}
}
Update: The original fiddles were lost, so I've attempted to recreate them. In response to the OP's comment about Bootstrap v3.0.3, the overflow statement can be eliminated.
Demo 2
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');