Layout of woocommerce pages - css

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.

Related

WooCommerce add to cart not working on mobile site or loading description

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.

Adsense in wordpress excerpt

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

How can I set first element to display: none;?

So I'm styling this posttype in Wordpress, and when the user links to a soundcloud track that track will show in the post header. Now, if that user posts more than one link I'd like the next ones to be in the content of the post, excluding the first one which already appears in the header.
This is what rougly is output:
<div class="content">
<p><iframe/></p>
<p><iframe/></p>
<p><iframe/></p>
<p><iframe/></p>
</div>
How do I style this in CSS so only the last three iframes displays?
Michael
Try this:
.content:first-child{
display: none;
}

Facebook Like social plugin sizing issues

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?

Highlight Menu Item When Viewing Single Post wordpress

i am making a wordpress news site. I use the new wp menu 3.0 where every menu item links to a template page. On those pages i display posts from custom loops. for instance lets say i have the page breaking news that displays the posts from the breaking news category. When i click on that link it takes me to the breaking news page and from there when i view single post from that category i want the page breaking news to be highlighted.
I have searched and found that wordpress assings ancestor classes to the links but thats not the case for me since i think that only works with categories as the navigation and im using pages.
Can anyone help me?
Thanks :)
are you using firebug or the inspectors built into chrome and safari. with those you can directly see what classes are available for you to style. maybe you already know that. If there are no classes to style there are hooks you can use to add a class. can you provide a url to your site?
Try the following in header.php...
<?php
/**
* Do this to #access in header.php
*/
?>
<nav id="access" role="navigation" class="<?php
if(in_category('cat-1')) echo 'post-in-cat-1 ';
if(in_category('cat-2')) echo 'post-in-cat-2 ';
if(in_category('cat-3')) echo 'post-in-cat-3 ';
?>">
Then in your stylesheet add this:
/**
* look for the menu-item-# generated by the menu in your theme and use that.
*/
.post-in-cat-1 .menu-item-1234,
.post-in-cat-2 .menu-item-1235,
.post-in-cat-3 .menu-item-1236
{
color:#FFF; // or whatever color you want :)
}
That's just my first thought, totally untested, so let me know if it works at all. I'm guessing that it will work based on this.
It's not as dynamic as real category pages since you have to set up the categories yourself and add the menu-item numbers to your CSS as needed. So there might be a more clever solution. But, without testing it myself, this is what I would try.
1. In css file of ur website,include this line where
- nav is the id of <nav> tag,where i have mentioned my menus in header.php
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
#nav li.current_page_item a {
-moz-border-radius: 3px 3px 3px 3px;
background-color: #82BD42;
color: #FFFFFF !important;
padding: 10px;
text-decoration: none;
}
2. We can change background-color,color and padding to our choose.

Resources