Custom HTML widget displays image strangely

  • pcp81215

    (@percivalconstantine)


    6 years ago

    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?

    • This topic was modified 6 years ago by pcp81215.

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

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

    (@joyously)

    6 years ago

    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;
}
    Thread Starter pcp81215

    (@percivalconstantine)

    6 years ago

    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)

    6 years ago

    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;
}
    Thread Starter pcp81215

    (@percivalconstantine)

    6 years ago

    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)

    6 years ago

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

    Thread Starter pcp81215

    (@percivalconstantine)

    6 years ago

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

    lisa

    (@contentiskey)

    6 years ago

    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)
  • The topic ‘Custom HTML widget displays image strangely’ is closed to new replies.