Set Category page exactly like blog page

Support
#1

Hi Team,

At present, my category page looks bad with huge featured Images on it. Here is the link to my category page
https://healthynawesome.com/health/
Now, I want the category page to exactly look like my blog page - https://healthynawesome.com/blog/

Please let me know what needs to be done.

Thanks

1 Like
#2

Hello Harish,

I could see that you have added some custom CSS that only takes effect to the blog page.

Kindly edit the CSS codes and instead of just targeting .blog, also target .archive.

For example, update the code:

.blog article {
    display: flex;
    flex-wrap: wrap;
}

to

.archive article,
.blog article {
    display: flex;
    flex-wrap: wrap;
}

Please do this to the other CSS codes that target only the blog page.

Hope this helps.

#3

I tried replacing the code, however, nothing changed. Can you please take a look and let me know what the problem is?

#4

Hi Harish,

You did the changes incorrectly. I didn’t mean to add .archive article in every code block that targets the blog page. I meant you have to update the code blocks and to also target the archive page.

For example:

.blog article {
    display: flex;
    flex-wrap: wrap;
}

to

.archive article,
.blog article {
    display: flex;
    flex-wrap: wrap;
}

Another example is:

.blog article .entry-wrap {
    flex: 0 0 70%;
    border-radius: 0;
    box-shadow: none;
    padding: 20px;
    background-color: transparent;
}

to

.archive article .entry-wrap,
.blog article .entry-wrap {
    flex: 0 0 70%;
    border-radius: 0;
    box-shadow: none;
    padding: 20px;
    background-color: transparent;
}

Kindly do the rest for the code blocks that target the blog page.

Hope this makes sense.

#5

Hi, Can you please do this for me. I am a non techie and do not understand anything about coding. I tried following you but not able to update it. It will be great if you can help me with this.

#6

Hello Harish,

We’d love to fix it for you. Regretfully we do not have any access to your site. Would you mind providing us the login credentials?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

#7

I have saved the credentials in Secured Note, Please help

#8

Hello Harish,

I have logged in and applied the changes.

Please check your archive pages now.

#9

Thank you so much for the help.

#10

We are delighted to assist you with this.

Cheers!

#11

I am sorry to bring this up now, the website looks good with the new changes made to the blog and category archive pages, however, the mobile version looks bad, can that also be fixed?

#12

Hey Harish,

I wrapped your custom CSS in a media query so it’s only applied to the screens above 768px resolution:

@media screen and (min-width: 768px) {
  .blog article,
  .archive article {
      display: flex;
      flex-wrap: wrap;
  }

  .blog article .entry-featured,
  .archive article .entry-featured {
      flex: 0 0 30%;
  }

  .blog article .entry-wrap,
  .archive article .entry-wrap{
      flex: 0 0 70%;
      border-radius: 0;
      box-shadow: none;
      padding: 20px;
      background-color: transparent;
  }
}

You should see the default view in mobile devices for both blog and archive pages now but don’t forget to clear the browser’s cache first. Hope this helps!

#13

It has still not changed. I am using an iPhone 7 and I cleared the cache to check the site, it still looks bad on mobile.

#14

Hi Harish,

As suspected it was the cache issue, I purged your plugin’s cache and now changes are reflecting on my end.

Simply clear your mobile’s browser’s cache and check the site now. Cheers!

#15

I Cleared the cache again and it looks right now. Thank you so much for your time.

#16

You’re welcome!
We’re glad we were able to help you out.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.