On one of the website www[dot]shellneverknow[dot]com[dot]au i am working, when i search something, the layout get broken. Its hard for me to find what is messing the layout and making it all align to right side.
The problem is that you have a class of “search” on the body tag, which get affected by this rule (which seems to appear in two style sheets):
.search {
float: right;
}
Off Topic:
It’s kind of annoying to have placeholder text that has to be manually erased, too. Preferably, use the new placeholder=“” attribute, and/or get some JS happening there.
Off Topic:
yes, agree but i am not familiar with js or jquery much
The layout is all of floating to extreme left,on ipad. how can i troubleshoot such things, when it shows error on tablets and not on desktop?
But it does happen on desktop! Narrowing your browser for testing purposes is web design 101. You’ll see exactly the same thing happen in your desktop browser if you test it, and then it’s easy to see what the issue is—namely, this style, which appears twice, so make sure to clean up both instances:
.featured-list {
width: 900px;
[COLOR="#FF0000"]margin-left: 50px;[/COLOR]
float: left;
padding-bottom: 30px;
height: auto;
}
Many thanks. One last thing. my featured items div isn’t being centered.I tried margin:0 auto; but nothing.