Category List editing

Hi

Please change the height for each item as you wish then go to css file of JM Category List extension: /skin/frontend/default/jm_classy/joomlart/jmcategorylist/css/jm.categorylist.css, at approx line 142:

Code:

div.jmzin-section {
    background: none repeat scroll 0 0 #fff
    border: 1px solid #fff
    bottom: 24px;
    display: block;
    left: 40px;
    padding: 30px 10px 10px;
    position: absolute;
    right: 40px;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: auto;
    z-index: 3;
}

and change to value for bottom, padding to suit your need.

http://prntscr.com/4apxq8

Hi

Thanks for the help. I however don’t have a problem with the title box with white background.

My problem is with the category photos. When I open my screen I only see two categories for instance where I want to change the width of the categories and depth of the photos to fit in the categories better.

The width and height of each item is declared via this css file: \skin\frontend\default\jm_classy\joomlart\jmcatego rylist\css\jm.categorylist.css

Code:

.jm-cat-item {
	background-color: #f5f5f5 
	background-position: top center;
	background-repeat: no-repeat; 
	background-size: 100%;
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 580px !important;
}

Hi there

I have still not found the perfect solution for my problems here.

I have tried to play around with the above css but still cannot get the right combination for this.

Currently the home page is looking like this: http://nichuizen.co.za/

The actual dimensions of the photos that I am using there is 578 X 1102.

This is an example of one: Attachment 39538

My problem is that I am not getting the whole of the photo to show on the home page. If you compare the original photo with the category lists on the current homepage you can see how it is very "zoomed in" and you don’t get the full effect of the photo. If I change the width of the photo so that you can see more of the photo I am getting trouble with different screen sizes and as soon as I use a bigger screen the photo doesn’t fit at all. How can I edit the css that the photo gets adjusted according to screen size so that the full height of the photo is shown at all times?

This is how I am hoping to get it to look like: Attachment 39539

thanks for the help.

You can try opening file: /skin/frontend/default/jm_classy/joomlart/jmcategorylist/css/jm.categorylist.css

At approx line 144, you will see this declaration:

Code:

div.jmzin-section {
    background: none repeat scroll 0 0 #fff
    border: 1px solid #fff
    bottom: 0;
    display: block;
    left: 30px;
    padding: 10px 0 0;
    position: absolute;
    right: 30px;
    text-align: center;
    transition: all 0.3s linear 0s;
    width: auto;
    z-index: 3;
}

you can change the bottom: 0; property to: bottom: 50px; or the value to suit your need.