[Resolved] Making Image Caption and Button Look the same on Desktop and Mobile

[Stefan]

Hi,

I used some CSS styling to update the image caption text and button look on the desktop version.
On the desktop it looks like I wanted it. However, the CSS instructions did not carry over for the mobile (and possibly tablet versions).

Button look
In this screenshot you can see that the button has a black border, white background and black text, whereas on the desktop version (see link here) they are rounded, have a red background and white text. I would like the buttons to look the same on both the desktop and mobile versions.

Image Caption Text Fix
Also, the image caption for featured and other images on the mobile version can only fit on one line. If there is more than one line of text, the additional lines are just appearing over the same line and it’s impossible to read. I had the same issue with the desktop version, but this has been resolved.

I look forward to your help.

Regards,
Stefan

[Fernando]

Hi Stefan,

For the first issue, your CSS code has a media query the only allows it to implement on screen widths greater than or equal to 769px: https://share.getcloudapp.com/04uQGDgJ

Anything smaller than this width would seize to have this CSS. Kindly remove the Media query if you wish to implement this on all screen sizes.

As for the second issue, there’s also a media query in the CSS you use to alter the caption, making it not implemented on smaller screens.

Hope this clarifies. If I missed something, or you’re referring to something else, kindly let us know. 🙂

[Stefan]

HI Fernando,

Great tip! Thank you. I put the values to “0px” and that solved the problem.

When I tried to delete the query, I was not sure which part to delete, so it was easiest for me to just change the values to 0px. I am not sure if that’s going to affect anything in the long run, but I am pleased with the result.

Thanks again.
Stefan

[Fernando]

You’re welcome Stefan! Glad you were able to resolve the issue! Removing the media query altogether and leaving the code within it should be better though if it’s not necessary. This will lessen unnecessary lines of code.

For instance, if you have this line of code:

@media (min-width: 769px) {
    .wp-show-posts-read-more {
        background-color: #ba1200;
    }
}

you may turn it to just something like this if the media query is not needed:

.wp-show-posts-read-more {
        background-color: #ba1200;
}

Reference to use of media queries: https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Hope this clarifies. 🙂

[Stefan]

Ok, thanks.

[Fernando]

You’re welcome Stefan! 🙂

[Author]

Posts