How to get images I’m uploading to the wordpress menu section to resize?

1 Views

I’m adding img tags to the navigation label field in the menus section in order to create some social media buttons. I want them to be 25px by 25px, but I want them to be ready for retina screens, so the images I’m uploading are 50 by 50px.

The annoying thing is, I actually managed to do this about 3 hours ago, but since coming back to it, they’re no longer re-sizing and I’m just left with a massive icon.

Read More

The code I was using to scale them down was: 

<img src=“url here” height=“25” width=“25”>

Is there a way of fixing this, or an easier way to achieve what I’m trying to do?

Thanks

Post Views: 1

Related posts

2 comments

  1. You are using stylized quotation marks in your code.

    <img src=“url here” height=“25” width=“25”>

    This is invalid HTML. Did you copy and paste the code from MS Word? That’s sometimes the reason.

    You need unformatted characters, which basic text editors provide.

    Keep the quotation marks simple and basic: 

    <img src="url here" height="25" width="25">

    These are ASCII quote marks which are valid HTML.

    Although quote marks are optional in HTML5, I would recommend always using them as a best practice. Here are some reasons why: Do you quote HTML5 attributes?

  2. Remove those inline heights and widths from the HTML and do this:

    /*using the parent class as the hook for specificity*/
.parent img{
    width: 100%;
    max-width:25px;
    height: 100%;
    max-height:25px;
 }

    This guarantees the image will respect the 25px X 25px size. Not smaller, not bigger.

    ** If your CSS is overwriting it, you may have a !important rule to clean up.

Comments are closed.