CSS won't change the element I have selected

  • Unknown's avatar
    wildhorizonscrossfit · Member ·

    I’ve been trying to adjust the size of the display-posts shortcode image on my homepage. I have the shortcode set to image size “large” currently, but that image is ridiculously tiny on mobile screens. I want to be able to increase the size of that element, but no selector i pick will change it at all. I’ve tried the default display-posts-listing and many other variations, but none of them affect it. Is there something I am overlooking?

    The blog I need help with is: (visible only to logged in users)

  • dcoleonline · Staff ·

    Hi there,

    Your display posts shortcode is currently inside of a div:

    <div style="width:40%;padding:0 10pt 0 0;float:left;">
[display-posts image_size="large" category="WOD" wrapper="div" posts_per_page="1"]
</div>

    This div tells the content to take up 40% of the available width, which as you’ve noticed gets pretty small on a mobile device.

    Instead of giving it an explicit width of 40% at all times, you can tell it to only be that small on large screens. You could do this by first giving the div an HTML class:

    <div class="example-class-name">
[display-posts image_size="large" category="WOD" wrapper="div" posts_per_page="1"]
</div>

    Once you have a class added, you can use CSS to specify the width (and other properties) of the div at different browser widths by using media queries.

    So this CSS would give the same width of 40% only to all screens with a minimum width of 768 pixels:

    @media screen and (min-width: 768px){
    .example-class-name {
        width: 40%;
    }
}

    By only targeting larger screens with the 40% width rule, the thumbnail will remain at the full size for mobile/tablet views. You can also add padding, margins or any other rules you’d like to the same class if needed:

    @media screen and (min-width: 768px){
    .example-class-name {
        width: 40%;
        padding: 0 10pt 0 0;
        float: left;
    }
}

    I recommend removing this from your div tags and just add a class instead:
    style="width:40%;padding:0 10pt 0 0;float:left;"

    Could you give that a try and let me know how it goes?

  • Unknown's avatar
    wildhorizonscrossfit · Member ·

    That works well, I do not believe the picture currently on display is very large, so I will have to re-evaluate if a very large picture is added to see if it makes the desktop version too big, but I can always adjust that. Otherwise, fantastic!

  • dcoleonline · Staff ·

    Ok great. If you need help with this when you try a larger image, feel free to reply. :)

  • The topic ‘CSS won't change the element I have selected’ is closed to new replies.