We are trying to insert adsense ads in between wordpress excerpt. But ads are overlapping in posts. How to fix this issue with css. My test site is Tiny Life Boat
<div style="max-width:700px; align:center; padding-top:0px; padding-bottom:0px;">my ad code</div>
You have all your articles floating left. So you need to set the clear to both for your adv wrapper to get the correct result.
.adv-wrapper {
clear: both;
}
<div class="adv-wrapper">
Your add goes here!
</div>
And please don't use the center tag its deprecated W3 Schools
Related
Hey probably sounds like a repeat questions. Tried all the solutions on stackoverflow but seem not to get the answer.
www.sextoyswizard.com (no adult nudity on this site)
Only does not run on mobile . You cant add anything to the cart nor click anywhere on that page to load description for instance.
There's a container that overlaps your div with id="container". It looks as though it's your search container that exists at the bottom underneath the product options.
<div id="container">
....
</div>
<div id="secondary" class="" role="complementary">
....
</div>
You need to either move this div somewhere or remove it. So you'll have to set up your markup to take that into consideration.
For example, in css I added:
#secondary {
float: left;
width: 100%;
}
This kept the search form in the bottom.
I am using woocommerce on my website ,
The problem is : Both woocommerce pages ( Shop & My Account ) Use same css clas <div class="main col-lg-9 col-md-8" role="main">
When i change the width of my account page, Same happens with the shop page?
i spent Hours on firebug but couldnt figure out
My Website : http://cardmart.tk
Thanks
You can use a parent element class to distinguish between those two pages.
Eg.
body.page-id-749 .main .col-lg-9 .col-md-8{ }
and
body.post-type-archive-product .main .col-lg-9 .col-md-8{ }
Let me know if that helps.
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?
I developed a website in drupal. But there is one last problem before I can put this production.
URL for my test page is test url here
Let me explain the problem in images.
CSS looks good chrome and below screen shot of image when loaded in Google Chrome.
chrome screenshot
When I load the page in IE8 there is huge space between post title which is html header2 and teaser which is html paragraph.IE8 screenshot
Can you help me remove this space between teaser and post title.
field-item{
display:inline;
}
remove the display property.
thought id post the solution rather than in the comments
Remove
display:inline;
and / or
padding-left: 5px;
from .field-item
I have tested it on IE 9.. And this is a bit of a guess but I tried to alter the p-tags margin-top to -15px so I guess that IE forces styling to the p-tag.. I think I would try to change it to a div.
<div style="vertical-align: top; background-color: red;" class="content">
<div class="field field-name-field-thumbnail field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img alt="" src="http://techmasti.forwardsfarm.com/sites/default/files/styles/thumbnail/public/5657048733_9ecb8bff8e_b.jpg" typeof="foaf:Image"></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div style="margin-top: 0px;" class="field-item even" property="content:encoded"><p style="margin-top: 0px;">We start with customizing the appearance using an existing theme. You may be surprised how customizable an existing theme can be simply by changing a few settings. From there we discuss ways to make your own theme based on an existing theme, and then show you how to tweak it through the use of CSS stylesheets.</p>
</div></div></div> </div>
hope it's helpful eventhough its a guess :-)
I'm having trouble fixing the product description display on my magento store. It displays just fine with chrome. However, it is coming on top of the product details in firefox. Have a look: http://www.chefmaha.com/index.php/default/dessert/cream-filled-basboosah.html
Any idea how to fix this?
Thank you.
You need to change this:
<div class="clear"></div>
to this:
<div class="clearer"></div>
Or add a .clear rule to your CSS.