Make images on category pages clickable

[ramyasriram1]

Hi,

I’d like to make the images on my category pages clickable. I’ve set it up such that it showcases the first image as featured image. How can I do this please? I’d like the link click to to take you to the post.

Comics Archives - The Tap

Separately how can I make the image size bigger just on mobile both on the category page and the post page?

Many thanks,
Ramya

[tristup]

Hi Ramya

Thanks for reaching out.
It seems that you are trying to link the featured image of the category page of Custom Post Type, you can do that by adding the archive page for that specific custom post type.

Before you add the archive pages for the custom post type, please go through the template hierarchy of the WordPress and the custom port type templates.
And if you are not proficient with the coding, I would suggest you hire a developer who can assist you to do this customization.

And regarding the image size, you use the following code to adjust the size in the specific screen to 100%, please copy the code and add that in your Theme Options > CSS.

@media  (max-width: 480px) 
{
    .category .entry-content.content img 
    {
        max-width: 100%;
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

NOTE: And please update the X theme to the latest version i.e 7.2.3 to avoid any version compatibility issue with the latest version of Cornerstone.

Thanks

[ramyasriram1]

Thanks, Tristup! I’ve set the max-width of media to 100%. However on mobile I still the image centered as shown in the screenshot, with a lot of space around it. How can I increase image size to fit the mobile screen width clearly please?

Many thanks,
Ramya

[prakash_s]

Hi Ramya,

Update the previous code with this code in theme option’s custom CSS to show the image fullwidth

@media (max-width: 480px){
.category .entry-content.content .wp-block-image.size-large {
    width: 100%;
    margin-left: 0;
}}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks