In Little Closet template, category.css causes vertical display to shrink

Website Templates
1

I have a script written by amazon that is not displaying when category.css is linked. It shrinks vertically


I am converting my website Clickforadeal.Com over to the little closet format.  When I started writing my shopping cart, I was unaware that I could buy a template such as "Little Closet" so I did all the website design myself.  I learned the hard way.  I had to really up my skills in HTML, CSS, Javascript"novice still".  And the server side I use PHP and MySql.  I do this all myself and learn as I go using tools such as W3schools, Codepen, Stackoverflow and nice people like you.  So I can figure out a lot of things myself, but this one has me stumped.  I have tried to insert different styles and have reviewed category.css and can't find where it is shrinking the height.  

Displayed with-in Little Closet template: BAD
https://clickforadeal.com/colorlib/colorlib1.png

Displayed outside of Little Closet: GOOD
https://clickforadeal.com/colorlib/colorlib2.png

And here is the script supplied by Amazon.com:

<script type=“text/javascript”>
amzn_assoc_placement = “adunit0”;
amzn_assoc_tracking_id = “my_id”;
amzn_assoc_ad_mode = “search”;
amzn_assoc_ad_type = “smart”;
amzn_assoc_marketplace = “amazon”;
amzn_assoc_region = “US”;
amzn_assoc_default_search_phrase = “laptop”;
amzn_assoc_default_category = “All”;
amzn_assoc_linkid = “afc96b1d06543b28cc48902f8e1eb54a”;
amzn_assoc_title = “Shop Related Products”;
amzn_assoc_search_bar = “true”;
amzn_assoc_search_bar_position = “top”;
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>`

Thanks in advance for any help.

2

Good morning

Please provide a link to the damaged page and i will check it
Also, please consider when you add something new in the template and it’s not working this is not template problem :slight_smile:

3

I put an example of laptops by amazon near he bottom of the page so you can see what I am talking about. Also I tried placing the script on other pages of the little closet template and it also does the same thing.
https://clickforadeal.com

4

Hello,

I hope you are doing well today.

I am not seeing the laptops at all, only shirt items, did you remove the snippet?

Best Regards,
Support

5

Hello,
Ok, I temporarily moved the amazon script to run right after the <header> loads, so it is now at the top of the page. I hope you can see it now. https://clickforadeal.com

6

Good evening

add this css at the bottom in css file:

div#amzn-native-ad-0 div.amzn-native-products-list div.amzn-native-product .amzn-native-product-attr-container {
position: relative !important;
}

7

Thank, that’s better but still needs to allow script vertical display results to be taller. https://clickforadeal.com That would be great!

8

Hey Noda,

Another thing I just noticed is the amazon link to the products is narrowed down, maybe this also is related to the height issue.

Thanks,

9

Good morning

Now you need this code:

#amzn-native-ad-0 div.amzn-native-products-list div.amzn-native-product {
height: 280px !important;
}

p.s. looks like you are already using it, just a small change is needed

no, the link is in original size, no changes is needed here

10

Thank You Noda, that did the trick, but the exact height was 255px for my situation.

Say, on another note, I am new to the colorlib templates, they are awesome. Are you actually Colorlib tech support, or just some kind person that shares your knowledge?

11

Hold On a sec, I added the same code to the product.php and product.css pages and it messes up again. just click on the blue product description in https://clickforadeal.com/index.php to see what I mean.

Thanks

12

Hello,

I hope you are doing well today.

Please remove the CSS from the files and add the CSS code to Appearance > Customize > Additional CSS.

Best Regards,
Support