SideBar Widget CSS Help Needed – I am stumped

Community Forums Forums General Discussion SideBar Widget CSS Help Needed – I am stumped

This topic is: not resolved

This topic contains 9 replies, has 2 voices, and was last updated by  braddalton 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #63723

    bstudio
    Participant
    Post count: 5

    I am stumped and need your assistance. I seem to be the only person in the course having this issue and its stumped me.

    I am following this training from Udemy.com – https://www.udemy.com/creating-a-business-website-with-a-responsive-design by Rob Cubbon.

    I am modifying the sample Genesis child theme 1.91 and am not able to figure out how to get rid of the padding on the blog post. I hope someone on here is able to help. The website is currently is currently locally hosted on XAMPP.

    I am trying to remove the padding on the blog post.:

    http://screencast.com/t/kXaCAlWq8Ky0

    Here is what I am trying to accomplish by making the blog post move closer to the margin are:

    http://screencast.com/t/hBLMUeSf1bf2

    I have included video from my site using the inspector element from Google Chrome:

    http://screencast.com/t/bUq5OoRn

    Here’s my CSS Style sheet that I am modifying:

    https://www.dropbox.com/s/hbbmovytjpw4nuh/style.css

    Much appreciation in advanced for helping me out. I hope I can return the favor soon.

    Benson

    #63764

    braddalton
    Participant
    Post count: 9807

    You want to move the sidebar closer to the content area?

    Or you want to remove the padding from within one widget?


    #63776

    bstudio
    Participant
    Post count: 5

    I like to remove the padding from within the widget so the text lines up with the title.

    Thanks.

    #63784

    braddalton
    Participant
    Post count: 9807

    You need to grab the section i.d for the widget. What type of widget is it?

    Then you would add CSS like this:
    [css]
    #recent-posts-8 {
    padding-left: 50px;
    }
    #recent-posts-8 .widget-title {
    padding-left: 20px;
    }
    [/css]

    This assumes you’re using the recent posts widget and it only effects the recent posts widget with an i.d of 8. Grab the section i.d for your widget using Firebug.

    Source http://wpsites.net/web-design/style-widgets-individually-beginners-guide/


    #63792

    bstudio
    Participant
    Post count: 5

    Will I be able to see it using inspector element from Google Chrome?

    #63796

    braddalton
    Participant
    Post count: 9807

    Yes


    #63798

    bstudio
    Participant
    Post count: 5

    Hi Brad,

    I added the changes to the WordPress Style CSS and it only made it worse.

    http://screencast.com/t/VX9vdf8V

    Much appreciation for helping out.

    Benson
    P.S. When I get some free time later tonight, I’ll move the site from my localhost to a subdomain so you can view it live.

    #63825

    braddalton
    Participant
    Post count: 9807

    I would change the values for the padding as they’re simply example values which need changing.


    #63843

    bstudio
    Participant
    Post count: 5

    Hi Brad,

    Yes, I did change the values for the padding. It made no difference.

    I’ll be uploading the website to my server in a bit.

    Benson

    #63846

    braddalton
    Participant
    Post count: 9807

    You will need to use the correct widget class and I.D or it will not work.

    The code i supplied is simply an example as i couldn’t access your source from an image.


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.