CNV.com Message Forums Forum owned by CNV.com Inc.
Wholesale and Drop Ship Adult Toys at SextoyClub.com
Sex Toys Affiliate program at AdultShopping.com
 

Go Back   CNV.com Message Forums > Affiliates: AdultShopping.com > Affiliate Help, Support & Tutorials

Reply
 
Thread Tools Display Modes
  #1  
Old 07-31-2015, 07:05 AM
DominaDoll's Avatar
DominaDoll DominaDoll is offline
Senior Member
 
Join Date: Apr 2009
Posts: 1,545
Default Mobile friendly Hacks - Youtube videos

Hey All!

I am going to be posting mobile friendly hacks here to make your sites more responsive.

Here is the first one: Making your YouTube Videos responsive:

Instructions here using CSS-
http://coolestguidesontheplanet.com/videodrome/youtube/
__________________
Domina Doll
Affiliate Manager CNV.com
Pop My Cherry Review
Pop My Cherry Shop
Reply With Quote
  #2  
Old 07-31-2015, 07:10 AM
DominaDoll's Avatar
DominaDoll DominaDoll is offline
Senior Member
 
Join Date: Apr 2009
Posts: 1,545
Default Responsive Images

To make an image responsive so it shrinks or resizes to any device DO NOT add the width="" code.

But be sure to add this style:

style="max-width:100%" so the image doesn't get bigger than you want.
__________________
Domina Doll
Affiliate Manager CNV.com
Pop My Cherry Review
Pop My Cherry Shop
Reply With Quote
  #3  
Old 07-31-2015, 07:20 AM
DominaDoll's Avatar
DominaDoll DominaDoll is offline
Senior Member
 
Join Date: Apr 2009
Posts: 1,545
Default Responsive Top Banner

If you add the top banner to the Header Image it will automatically shrink. However, it may get too small to see the logo clearly.

So, instead of using the Header Image, use the Site Header to add your banner which is first cut into to sections (left and right). The left side is the logo, and the right side will disappear for mobile, making the logo larger.

Here is an example of the code we used for Drloves.com:

<div id="header_content">
<p style="background-color: #fff;"><a href="/"><img alt="Drloves.com" src="http://cnvassets.s3.amazonaws.com/assets/drloves-banner-left.gif" style="max-width:100%;" /></a><img class="no-responsive" src="http://d1uc3ft0n4nkav.cloudfront.net/admin/aff_files/drloves/drloves-right-2015.gif" style="width:670px" /></p>
</div>

In this case you can add the width style, because the right side of the banner is going to disappear in mobile anyway, so it doesn't have to be responsive.

Also, objects that you can't shrink, or look bad shrunken, you can add the "no-responsive" class to them to make them disappear. Voila! It's magic
__________________
Domina Doll
Affiliate Manager CNV.com
Pop My Cherry Review
Pop My Cherry Shop
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 07:43 AM.


Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Copyright 2008-2010 CNV.com