WordPress.org

Support

Support » Themes and Templates » Iconic One » [Resolved] Finding CSS allocation for specific widget area

[Resolved] Finding CSS allocation for specific widget area

  • clouder

    @clouder

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • clouder

    @clouder

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    clouder

    @clouder

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Resolved] Finding CSS allocation for specific widget area’ is closed to new replies.
Skip to toolbar