CSS for widgets?

  • Hello everyone, I am using a plugin called “Image Widget”, I’ve inserted a logo into my page with it and now I am trying to format it using css. When I use chrome inspect element I can get it exactly where it needs to be with this code:

    .alignright {
    float: right;
    margin: -217px 15px 2px 15px;
    }

    But when I add it to my childtheme’s stylesheet, nothing changes. Am I not using the right selectors or what? I’ve even tried the !important method and that doesn’t work either. If someone has a minute to help me with this I’d really appreciate it,

    The site is: https://www.ai.dorianlatelle.com

    Thanks!

Viewing 6 replies - 16 through 21 (of 21 total)
  • Thread Starter dorianstevens

    (@dorianstevens)

    Thank you TrishaM, I’m very familiar with css but I guess not familiar enough to figure this problem out. I’ll try it when I get home. Are you suggesting that I use the “aside#widget_sp_image-2 image” code in my child theme’s stylesheet?

    Thread Starter dorianstevens

    (@dorianstevens)

    Also thanks for calling my hand lovely ??

    I know this is a bit unrelated but I see that you have the widget box with the ID of Secondary showing up twice in your code. Id’s are supposed to be unique to an element while Classes can be used multiple times throughout a template. Both the boxes I see for “Secondary” seem to have the paypal info in there so it could be that something being redundant in your code. When you get home let me know and I’ll try to help you the best I can.

    oh, and one last thing, I see that your sidebar is being hidden on mobile devices. Once you get it all fixed and working the way you want, you’ll want to add an @media query to your stylesheet so that when the browser is under a certain size, to re-locate the sidebar under the post and maybe even change it’s styling a bit in how it looks. You could probably do this by just using the ID of that widget box or sidebar and add a clear:both attribute in the media query.

    Here is a link that will help you with @media if you’re not that familiar with it:
    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    instead of BODY, you would essentially put the name of the class or ID you want to modify when the browser is under a certain width. the example shows 300px but you can change that to whatever size you see fit.

    @dorianstevens,

    Yes, that is one option. Personally I think The Dro is on the right track, but if you decide to modify your stylesheet, you would target that as

    aside#widget_sp_image2 img (note, ‘img’ not ‘image’) { add your styles }

    As The Dro mentioned, watch your Ids and classes – ID’s are to be used only ONCE on a page (otherwise things can get confused), whereas Classes may be used as many times on a page as you like.

    So for example, if you use an ID of “mycoolimage”, you can only refer to it once…..if however you make that a CLASS instead of an ID, you can use it multiple times on the same page, useful for when you’re displaying lots of content (posts or images) that you want styled the same way – assign them to a CLASS, not an ID.

    Thread Starter dorianstevens

    (@dorianstevens)

    Thanks guys, with your help I was able to individually format the logo pic for each specific page. I had to use media queries for mobile devices and tablet to get it where I wanted it but it’s fine now.

    Question 2: When viewing from a mobile phone, instead of there being a horizontal menu with text, there’s a dropdown toggle. I’m looking to add that same toggle to other smaller devices (mainly tablets) excluding computer screens. I know what to do as far as coding it, I’m just not sure which selector to target. Any suggestions?

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘CSS for widgets?’ is closed to new replies.