5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

How do I set min width for my responsive theme?

by oliverjones
4 replies
  • WEB DESIGN
    • |
When I load a 336px wide Google ad into my new theme, when viewed on my iPhone, the ad overhangs the right side of the post. (see attached).

Any ideas how I rectify this please?
#min #responsive #set #theme #width
  • Profile picture of the author RobinInTexas
    Try adding a css style for the image,
    img#google1 {
    display: block;
    width: 100%; /*or 95% to add padding */
    height: auto;
    border: 0;

    and then enclose it in a <div id="google1">
    Signature

    Robin



    ...Even if you're on the right track, you'll get run over if you just set there.
    {{ DiscussionBoard.errors[8927247].message }}
  • Profile picture of the author sham2
    You need to fix your width under 320 px. If you want to display full image in mobile display then give 100% width under the query min-width :320px to 480px. It will be work probably. You need to learn about bootstrap and implement it on your website.. Bootstrap will solve your all problems.
    {{ DiscussionBoard.errors[8931700].message }}
  • Profile picture of the author Patrick
    Google adsense banners ( I guess that's what the OP is using ) uses javascript and not "images".
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[8933857].message }}
  • Profile picture of the author clickbump
    Since the default Google Ad Unit code is enclosed in an iframe, you have no control over any element inside the iframe (due to the browsers internal XSS, cross site scripting countermeasures). You only have access to the iframe itself.

    What you Need to check out is Google's new Responsive Ad Unit

    Go to your Google adsense dashboard and add a "Responsive Ad Unit" to your collection of Ad Units.

    You can then replace your ad code with the new responsive ad unit which properly scales itself to fit the device viewing your site. Its pretty sweet. You can see an example (on desktop and mobile) here.

    When you access the above page on a mobile device such as an iphone or Android, notice how the ad responds when you rotate your device from vertical to horizontal.
    Signature
    {{ DiscussionBoard.errors[8938294].message }}

Trending Topics