My Responsive Theme is interfering with Facebook LikeBox Widget

Hi everyone!

Just a quick question, my responsive theme is cutting off the side of the facebook like box when it resizes at smaller browser widths.

Is this just a simple CSS fix? If so, I'm wondering if anyone can tell me the proper selector to make sure this doesn't happen and whether it will gracefully accept @media screen and (max-width: 1000px) for instance :slight_smile:

At the link below is an example of what happens when the browser window is resized. (The Faces in the facebook likebox widget get cut off on the right)

http://acoustagrip.com/concertmaster/

  • Michael Bissett

    Hey @Dakota, hope you're doing well today! :slight_smile:

    It looks like the Facebook Like box isn't the only thing affected, the shopping cart widget is getting cut off as well.

    Given the way this theme is styled, it seems like the best route to take would be to make the content section full-width, using the following CSS code:

    @media (max-width: 979px) and (min-width: 768px) {
        #content {
            width: 100%;
        }
    
        #secondary {
            width: 100%;
            margin-left: 0;
        }
    }

    You can insert that code into a plugin like Simple Custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    And that'll apply the style for you. Let me know if I can be of further assistance please! :slight_smile:

    Regards,
    Michael

  • Dakota

    Thanks for your response, Michael!

    I've done this, but I was hoping maybe there was a way to have a width of 232 px for the wider screens (so that 4 columns of faces could be shown) and a width of, say, 220px for the narrower screens so that 3 columns could be shown.

    I've been trying to get at that iframe with some custom CSS, but I can't find the right selector for the life of me. I noticed that the width that we input from the widgets area is actually an inline style, making it more difficult to override, but I think I could do that if I could figure out what it actually is!

    Is there any way to use a media query to specify two different widths for the likebox depending on the width of the screen?

    Thank you for your time and attention, Michael.

    Regards,

    Dakota

  • Ash

    Hello @Dakota

    Currently I am seeing the like box is not cut in mobile view. So is it fixed now?

    Also to select the iframe using css you can try this:

    .widget-container iframe{
    width: XXXpx !important;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS

    Don't forget !important; to override inline css.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.