• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 22.06.17, 09:38
  • Opened by: Hugo Snellen
  • Closed by: Marek
  • Closed on: 29.08.17, 23:40
  • Reason: No answer from a customer

Ticket #10484 - image in cat header disturbs page layout

Comments

Marek 22 Jun 2017, 10:18

Hi Hugo.
Use following css to fix:

#category .cat_desc {width:60%}
Hugo Snellen 22 Jun 2017, 10:47

i am using this css

#category .content_scene_cat {height:217px; background:#fff}
@media (min-width: 727px) {

  #category .content_scene_cat img {float: right;
      max-width: 400px !important  /* max width for image */
  }
  #category .cat_desc {
      width: 40%; /* category description width */
  }

}
#pattern {background:url(http://label-provence-nature.fr/themes/alysum/images/LPN_background.gif)}
body ul.main-section-links ul.main-section-sublinks > li {margin-bottom:10px}

body ul.main-section-links ul.main-section-sublinks > li a {
display: block;
overflow: hidden;
}

Marek 22 Jun 2017, 10:48

Just replace

width: 40%; /* category description width */

with

width: 60%; /* category description width */
Hugo Snellen 26 Jun 2017, 14:50

Oh thank you, what is the optimal image size to fill in the category space?

Marek 26 Jun 2017, 22:22

Hi Hugo.
Here you can read about that https://alysum5.promokit.eu/documentation/#!/images

Hugo Snellen 27 Jun 2017, 09:43

is there no way to improve the resolution? How do I assign all space to text only?

Marek 27 Jun 2017, 09:45

You can use images with high resolution, for example 2000×2600.
“How do I assign all space to text only?” - I didn’t understand that clearly.

Marek 27 Jun 2017, 09:54

I don’t see any issues there

Hugo Snellen 27 Jun 2017, 09:56

you dont see any details in image at all, can i use the thebig questiob mark field like in
http://label-provence-nature.fr/en/40-soap-cord-4-different-objects

Marek 27 Jun 2017, 10:00

http://awesomescreenshot.com/04e6byjwa1 that means there is no category image. Try to upload it

Hugo Snellen 27 Jun 2017, 10:12

i do not agree all images i upload end up in field for category description

Hugo Snellen 27 Jun 2017, 10:24

either there is no image and the question mark field or it squeezes it in the cat description field at very low resolution

Marek 27 Jun 2017, 10:25

Look, there is no category image http://awesomescreenshot.com/0016bykle1. Try to upload it to get it here http://awesomescreenshot.com/04e6byjwa1

Hugo Snellen 27 Jun 2017, 10:28

that is what i do!!!!

Hugo Snellen 27 Jun 2017, 10:30

yu see my upload for fantasy on the attached file!!

Marek 27 Jun 2017, 10:31

Give me a link to front page to see it

Hugo Snellen 27 Jun 2017, 10:37

http://label-provence-nature.fr/en/

  • #category .content_scene_cat {height:217px; background:#fff}

@media (min-width: 727px) {

  #category .content_scene_cat img {float: right;
      max-width: 400px !important  /* max width for image */
  }
  #category .cat_desc {
      width: 60%; /* category description width */
  }

}
#pattern {background:url(http://label-provence-nature.fr/themes/alysum/images/LPN_background.gif)}
body ul.main-section-links ul.main-section-sublinks > li {margin-bottom:10px}

body ul.main-section-links ul.main-section-sublinks > li a {
display: block;
overflow: hidden;
}

#pk_customlinks .pk_wishlist {display:none} /* hide Wishlist */
#pk_customlinks .pk_favorites {display:none} /* hide Favorites */
#pk_customlinks .pk_watchlist {display:none} /* hide Watchlist */
#pk_customlinks .pk_compare {display:none} /* hide Comparelist */

Marek 27 Jun 2017, 10:40

I’m sorry, my english is really bad, and I can’t understand what you ask me to do.
Could you please write me clear? For example: category image not shown - please fix it

Hugo Snellen 27 Jun 2017, 10:50

category image not shown in correct place
image inserted for category goes into small space of desription but not in predefined field

http://label-provence-nature.fr/en/10-wall-mounted-rotating-soap

Marek 27 Jun 2017, 11:27

I can do it like this: http://awesomescreenshot.com/0bd6bym95d Or let me know how it should be

Hugo Snellen 27 Jun 2017, 11:27

please look at these images

Marek 27 Jun 2017, 11:28

ok, how do you think it should look?

Hugo Snellen 27 Jun 2017, 11:32

like this, in original question mark block designed for cat image

Marek 27 Jun 2017, 11:35

Ok.
Please check out category image settings first. http://alysum.promokit.eu/documentation/#!/configuring_images Then upload your category image with the same dimension like defined in your back office

Hugo Snellen 27 Jun 2017, 11:45

I am afraid that some of my image sizes may be incorrect:
rhese are my image sizes available:
9 m_scene_default 161 px 58 px
Modifier

10	small_default	45 px	45 px						

Modifier

11	medium_default	104 px	104 px						

Modifier

12	large_default	462 px	462 px						

Modifier

13	thickbox_default	605 px	605 px						

Modifier

14	category_default	200 px	111 px						

Modifier

15	home_default	213 px	213 px						

Modifier

16	scene_default	870 px	300 px						

Modifier

17	manu_alysum	154 px	74 px						

Modifier

18	cart_default	80 px	80 px
Hugo Snellen 27 Jun 2017, 12:06

sorry for the confusion Marek
I put image to 400-222 , need that
I put css to 50%
How can I get my text better in place please?

Marek 27 Jun 2017, 13:38

Do you want to have a text like this: https://www.awesomescreenshot.com/0bd6bym95d