WordPress.org

Ready to get started?Download WordPress

Forums

Iconic One
[resolved] Finding CSS allocation for specific widget area (4 posts)

  1. clouder
    Member
    Posted 9 months ago #

    Hy my website is http://www.yawncentral.com

    I'm trying to find the css code to edit the widget area to the right of my website. It is a text widget holding the codes for the images of ad place holders to the right hand side.

    I'm trying to locate them so that I can hide that particular text widget in mobile version, so that the ad place holders don't show in mobile versions. I've succeeded in hiding the two banner ad place holders but trying to do the same to the ad placeholders in the right sidebar.

    I want it find the css allocation for that specific text widget so that if I put other text widgets in that sidebar, they won't be hidden as well in the mobile version

    Help will be greatly appreciated.

  2. clouder
    Member
    Posted 9 months ago #

    The code for the images inside the text widget is

    <img src="http://yawncentral.com/wp-content/uploads/2013/11/300widthby250height.gif" alt="square ad" align="middle"></img>
    <img src="http://yawncentral.com/wp-content/uploads/2013/09/160by600wideskyscraper.png" alt="wide skyscraper"></img>  <img src="http://yawncentral.com/wp-content/uploads/2013/09/120by600skyscraper.jpg" alt="skyscraper"></img>

    To make finding the area easier in source.

  3. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Using a browser tool like Firebug will show you specific ids for each widget area -

    <aside id="text-3" class="widget widget_text">
    <aside id="search-2" class="widget widget_search">
    <aside id="categories-2" class="widget widget_categories">
    <aside id="recent-posts-2" class="widget widget_recent_entries">

    You can use those in CSS selectors to target only the widget areas you want - i.e.

    #text-3 {
        display: none;
    }

    To target only smaller devices, you'll need to put the above inside a media query.

  4. clouder
    Member
    Posted 9 months ago #

    Sweet that worked :P.

    I used the code @media screen and (max-width: 320px){#text-3{display:none;}} to hide the widget in the mobile version.

    Also thank you for referring me to firebug, though I'll certainly find a tutorial to find out how you used it to find the code.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.