Support » Fixing WordPress » Custom HTML widget displays image strangely

  • percivalconstantine

    (@percivalconstantine)


    I’m trying to put Apple Podcast and Stitcher badges in my sidebar so listeners can easily subscribe to my podcast feed, so I downloaded the badges from both the sites and used the Custom HTML widget to display them. But something strange is happening.

    Here is the code I used:

    1
    <a href="https://itunes.apple.com/us/podcast/japan-on-film/id1453310558?fbclid=IwAR3iY85xRl5fFfv5L7PakkgOOSpnVJ9Wk-iLheBqd28cD1YOUSTpTyDY0kM" target="_blank"><img src="http://japanonfilm.com/wp-content/uploads/2019/02/US_UK_Apple_Podcasts_Listen_Badge_RGB.png" alt="Listen on Apple" width="165" height="40"></a><br>
    2
    <a href="https://www.stitcher.com/podcast/percival-constantine/japan-on-film?refid=stpr" target="_blank"><img src="http://japanonfilm.com/wp-content/uploads/2019/02/Stitcher_Listen_Badge_Color_Light_BG.png" alt="Listen on Stitcher" width="165" height="49"></a>

    However, if you check out the website, the images are being displayed at very strange dimensions. For starters, they’re being displayed as round when they’re rectangles. And two, they’re being displayed as far larger than they’re supposed to be. I’ve tried inputting the actual dimensions into the code, but that didn’t work, either. Any ideas how I can fix this?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Joy

    (@joyously)

    You have this CSS in your page:

    #secondary .textwidget img {
        border-radius: 50%;
        height: 200px;
        margin-left: auto;
        margin-right: auto;
        object-fit: cover;
        width: 200px;
    }
    .textwidget img {
        display: block;
        margin-bottom: 25px;
    }
    percivalconstantine

    (@percivalconstantine)

    Should I delete it via the editor or can I use the Additional CSS option to change it, and if so what should I put in?

    lisa

    (@contentiskey)

    1-install health check plugin which can be used in troubleshooting mode to deactivate all plugins and theme
    might help narrow down the source of the issue
    https://wordpress.org/plugins/health-check/

    2-I see this code. Border radius would make the round shape.

    #secondary .textwidget img {
        height: 200px;
        width: 200px;
        object-fit: cover;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    percivalconstantine

    (@percivalconstantine)

    I still don’t know what custom CSS I should enter to override this. I don’t want to directly edit the theme files unless I have to.

    lisa

    (@contentiskey)

    “I don’t want to directly edit the theme files”
    suggestion: use the JetPack Custom CSS module
    https://jetpack.com/support/custom-css/

    percivalconstantine

    (@percivalconstantine)

    I know, but I mean what do I enter if I just want the width and height to display normally?

    lisa

    (@contentiskey)

    1-try something like:
    #secondary .textwidget img {
    border-radius: 0%;
    }

    2-you might need to experiment and adjust “object-fit”
    https://www.w3schools.com/css/css3_object-fit.asp

    3-contact theme author for best guidance
    https://wordpress.org/themes/creativ-blog/

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.