Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 25, 2018 at 12:31 pm #917348
    codecreative

    hi guys im trying to style the catalogue so it looks nice for a menu at http://eatingfit.codecreative.uk/menu/

    it seems to be that the thumbnail image doesn’t make the column bigger, so the dotted lines are too high up for each image

    It seems even if a food image was say 500px tall it would just overflow its parenet container and not increase its size

    any help on this please?

    • This topic was modified 6 years, 10 months ago by codecreative.
    February 25, 2018 at 3:12 pm #917395
    Victoria

    Hey codecreative,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-catalogue-list li {
    padding: 10px 0;
}

    Is this what you’re trying to achieve?

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 27, 2018 at 10:35 am #918336
    codecreative

    Hi Victoria

    Thanks for the help I have the menu looking great now but for some reason the height of the area around each menu doesn’t expand if the text is bigger

    My client added some extra bits and now it doesn’t expand properly I think it is related to an overflow

    I had to use css to set the image height and text height to 150px to get it looking right but this isn’t flexible to allow various user input character lengths

    Any idea what I need to do to get the theme to behave this way with this element ?

    Thank you in advance

    February 28, 2018 at 9:44 am #918885
    Ismael

    Hi,

    Could you provide a screenshot of the issue? I can’t see any layout issues in the menu page right now. Please create a test page if possible.

    Best regards,
    Ismael

    February 28, 2018 at 9:50 am #918888
    codecreative

    Hi Ismael

    sure please see this

    View post on imgur.com

    The two menu items on the left have a bit more text, just one more new line and each catalogue area doesn’t expand and instead clips the overflow…

    Height is set to 150px for each element, id rather not have to set a height at all. If i dont the menu doesn’t render properly

    February 28, 2018 at 9:58 am #918892
    codecreative

    hi so i did a small css tweak using the min height property instead and got a much better result

    View post on imgur.com

    Also if someone writes a lot of text the text area will increase to accomodate and not clip overflow now which is brilliant

    my last question is when the text area increases, lets say someone writes a lot on one item and it is 200px in height.

    How can I make sure the image on the left always remains vertically aligned to the middle?

    March 1, 2018 at 4:42 pm #919744
    Vinay

    Hi,

    I’m unable to test the CSS on your site please give the below code a try

    
.av-catalogue-container li img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

    Best regards,
    Vinay

    March 1, 2018 at 7:13 pm #919813
    codecreative

    Hi Vinay

    thank you for your reply much appreciated

    it seems the images vanish when i added that css

    March 1, 2018 at 8:02 pm #919849
    Jordan Shannon

    Hi,

    Did you follow his reply in the private area for if the css didn’t work?

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.