Control Width of item title

I previously asked how to control the width of the titles of the items in the sidebar, however, the css code isn’t working for one widget ‘latest kit reviews’ on my homepage:

The code was:

.cat-post-widget li.cat-post-item {
max-width: 150px;
text-align: center;
}

Please could you let me know if there is another i can try. Screengrab attached.

Many thanks,

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.wpcufpn_container .title span {
    overflow: visible!important;
    text-overflow: ellipsis;
    max-width: 70%!important;
}

Please let me know if this helps.

Best Regards,
Support

This did work for the text, however, when i use ipad or mobile the images now cross over. Is there any other code i can add to sort this out?

screengrab attached.

Thanks for your help

Hey there,
Hope you’re doing well today

I’ve revised the code and have provided you with some media queries that essentially cater to the three main breakpoints (desktop, tablet and mobile). Kindly add and save the following code to Appearance > Customize > Additional CSS and let me know if it works:

@media (min-width:800px){li.cat-post-item {
    display: inline-block!important;
    margin-left: 30px!Important;
  }
}

@media (max-width:500px){li.cat-post-item {
    display: inline-block!important;
    margin-left: 15px!Important;
  }
}

@media (min-width:500px) and (max-width:800px){li.cat-post-item {
    display: inline-block!important;
    margin-left: 30px!Important;
  }
}

I hope this helps :slight_smile:

Best Regards,
Support

Hi,

Thanks for readjusting the code, however, it doesn’t seem to re-size for a tablet. Would i be able to try something else?

Thanks,

Hey again,
Thanks for keeping in touch with us.

Seems I may have made a mistake with that. Sorry about that.

Kindly try this instead:

@media (min-width:501px) and (max-width:1024px){
li.cat-post-item {
display: inline-block!important;
margin-left: 30px!Important;
}
}

Please let me know if there are any more questions that I may answer for you :slight_smile:

Best Regards,
Support.

Hi,

Sadly this code still doesn’t work. Would there be any other option?

Thanks,

Hi there,
Thanks for keeping in touch with us.

Not sure why that code didn’t work, however, I’ve tested this from my end on an iPad and it seems to work perfectly.

@media only screen and (max-width:50em) { 
	.insideframe li {
    margin-right: 10%!Important;
}

If you’re still not getting it, please let me know the device that you’re using so that I can code for that breakpoint.

Please let me know if there are any more questions that I may answer for you :slight_smile:

Best Regards,
Support.

I am using a Mac and have attached a screen grab of what i can see. The same happens when i use my ipad after saving and publishing.

Thanks,

Hey there,
Hope you’re doing well today

Please clear your browser cache and try again. From my end, everything looks perfect. See a screenshot below:

Best Regards,
Support

The below code seemed to work:

.insideframe li {
margin-right: 7%!Important;
}

It doesn’t work when I re-size a windows tab on mac but does work on ipad.

Thanks,