My Articles > Category List : Styling Issue

[Reflect Growth]

On the “My Articles” section of a members profile, articles with multiple categories (listed as Archived – see screenshot) seem to flow off the end of the bounding box. On face value it looks like a styling issue. Any suggestions?

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you link me to your website? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Reflect Growth]

http://clients.fgsd.com.au/reflectgrowth/blog/members/selena/articles/

🙂

Thanks in advance

[Laura]

Hello, please add this to style.css in child theme

COPY CODE

#main-container .article-content {
padding-top: 0;
float: none;
width: auto;
border: 0;
background: transparent;
height: 250px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Reflect Growth]

Hi Laura,

Thanks for that. I tried that approach but when resizing the screen, the categories still spilled over the bounding box (because of the fixed height of 250px). I’ve had more of a dig today and can see that the issue may be caused by the social articles css (http://clients.fgsd.com.au/reflectgrowth/blog/wp-content/plugins/social-articles/assets/css/stylesheet.css?ver=20140825) at line 627:

If the fixed height of 30px is removed the bounding box resizes appropriately.

.article-categories{
width: 50%;
/* height: 30px; */
float: left;
margin-bottom: 2px;
font-size:11px;
line-height: 30px;
}

This does mean that the bounding boxes would end up being different sizes, which could only really be circumvented by amending the category list to use an accordion effect (i.e. show one item then expand to see more where required).

Please could you advise where I’m best to amend this css code so I wont affect the code base on future updates.

Many thanks 🙂

[Reflect Growth]

For the time being I’ve added this to my childs theme:

.article-categories{
height: auto !important;
}

Please let me know if this will cause any issues that you can think of.

Thanks!

[Laura]

Hello, that wont cause any issue, if it does, you can just specify where is it with another class

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Reflect Growth]

Thanks for your help!

[Author]

Posts