Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 30, 2017 at 11:36 am #858746
    Steve

    Hi,

    Is it possible to achieve this layout with ENFOLD?
    https://www.oakmaninns.co.uk/

    Many thanks
    Stevo

    October 1, 2017 at 1:51 pm #858900
    Rikard

    Hey Stevo,

    I’m sure it is, though you will likely need some custom CSS here and there. If you have any specific questions then let us know.

    Best regards,
    Rikard

    October 1, 2017 at 10:48 pm #859016
    Steve

    Hi Rikard,

    Yes – I would love some help trying to achieve this. I would like to get that layout – probably using Masonry gallery, I would think…?
    Can you provide some CSS guidance..?

    Many thanks
    Stevo

    October 2, 2017 at 6:53 am #859099
    Rikard

    Hi Stevo,

    We’d be happy to answer specific questions, so if you have started off somewhere then please link to the site and let us know what problems you are having.

    Best regards,
    Rikard

    October 2, 2017 at 6:40 pm #859324
    Steve

    Hi Rikard,

    The test page is here:

    code test

    The page I’m trying to emulate (with 1/4 & 3/4 widths) is here:
    https://www.oakmaninns.co.uk/

    Regards
    Stevo :-)

    October 4, 2017 at 2:20 pm #860133
    Victoria

    Hi Stevo,

    It might be easier to use color sections, inside of them 1/4 and 3/4 elements with background images and text inside, like on the screenshot below, and then adjusting a bit with the help of css.
    https://cl.ly/472w023I0X3h
    https://cl.ly/1X0b13173p47

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 4, 2017 at 5:41 pm #860234
    Steve

    That looks good Victoria. As these are all responsive, I’m at a bit of a loss as to what size images I should use as background.

    I have added the sections in 2 examples UNDERNEATH the masonry. Both have a border of 10px, both have bg colours so you can see any gaps:
    https://littlegemscountrydining.co.uk/code-test/

    1st – Colour section with layout elements in
    2nd – Just the layout elements
    Images are:
    1/4 = 352x705pixels & 704x1410px (yes – I see they don’t fit – not sure what to do there!
    3/4 = 1410×745

    I would like it to be full screen stretch, and all borders the same …and that they still look good when on mobile (equal borders all round)

    ps. I have used images INSIDE the sections, as I could not get background to show a fixed size
    Thank you!!
    Stevo :-)

    • This reply was modified 7 years, 2 months ago by Steve.
    October 9, 2017 at 6:33 am #861754
    Ismael

    Hi,

    The size of the images is fine but you have to set the background size property. In the background settings panel, set the Background Repeat to “Stretch to Fit”. This setting will force the image to cover the entire column or container.

    Best regards,
    Ismael

    October 9, 2017 at 1:57 pm #861903
    Steve

    Hi Ismael – they’re NOT background images, they are images placed inside a section.
    That is why I asked about image sizing, as I want the sections to be equal heights.
    (If I just stretched as a bg photo – it is warped. I don’t want that either!)

    Also , do you have a snippet of QUICK CSS code to make the sections stretch full-width

    Stevo :-)

    • This reply was modified 7 years, 2 months ago by Steve.
    October 10, 2017 at 8:02 am #862333
    Ismael

    Hi,

    I’m sorry but that’s not going to work because the height of the columns will change on different screen sizes. We can set the height of the images to 100% but it’s going to be distorted. You have to add the image as column or cell background. Use the separator/whitespace element to set the height if you’re not planning to add any content inside the columns.

    Best regards,
    Ismael

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