[Resolved] Widget designing & padding

[purnima banik]

Hi Tom,
I am a newbie in this field, want to design the widget items(hovering and underline effect only) of my blog http://dajobb.com/ like the widget item of the website link given below https://wordpress.org/support/forum/multisite/
Also in mobile view, the sidebar of my website does not seem to left indented rather it comes almost in the middle of the screen.
Would be grateful if you kindly suggest the CSS code to implement this two option on my blog.

[Leo]

Hi there,

– Not sure what you mean? Which elements would you like to underline in your sites? The items in sidebar?

– Sidebar widget looks left indented on mobile to me? https://s33.postimg.org/p59ylzdjj/2017-12-04_0853.png
Are you seeing something different?

[purnima banik]

Yes, I wanted to underline and having the same effect only on the items only in the sidebar. With regard to indentation, I wanted the items to be a bit more left indented like other blogs as usual

[purnima banik]

Could you please suggest the CSS code?

[Leo]

Sidebar underline:

.sidebar a:hover {
    text-decoration: underline;
}

Sidebar padding on mobile:

@media (max-width: 768px) {
    .widget-area .widget {
        padding-left: 0px;
    }
}

[purnima banik]

I wanted the same effect on widget as on this website
https://wordpress.org/support/forum/multisite/
but the CSS code as suggested shows underline when hovered even that too is not extended, actually, I wanted the same thing as on this website, Sorry, but if you could suggest. It would be very very helpful.
Thanks.

[Leo]

I’m not sure what you mean? Underline looks the same to me?

If you are seeing something different, can you leave the CSS in?

[purnima banik]

I think I am unable to make you understand, actually the underline while hovering is ok. It is working with the CSS as suggested but I also wanted the divider (I guess), in between the widgets as shown in this webpage https://wordpress.org/support/forum/multisite/
This is what I was asking for?

[Leo]

Something like this?

.widget ul li {
    border-bottom: 1px solid #000000;
}

[purnima banik]

Yes, many many thanks, Leo. Sorry for troubling you. Keep up the good support. Have a good day

[Leo]

No problem! 🙂

[Author]

Posts