Finding CSS allocation for specific widget area

  • Resolved clouder

    (@clouder)


    10 years, 5 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.

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

    (@clouder)

    10 years, 5 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.

    WPyogi

    (@wpyogi)

    10 years, 5 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.

    Thread Starter clouder

    (@clouder)

    10 years, 5 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.

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