Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 21, 2016 at 11:39 am #651408
    aderal2016

    Hi all,

    Is there a way to set the container width per page?

    I mean.. in Enfold Options > General Layout > Dimensions we can set “Maximum Container Width” and right now I have 1310px.

    Now I’m creating a portfolio item to upload a project, and I’ve to make the design exactly as the attached image ( http://d.pr/i/1fsaN ). In the section below the first paragraph, I want to create the same ratio so I tried by styling with a “code block” element like this:

    <div class="portfolio-image-gallery">
<img src="url/image/1" />
<img src="url/image/2" />
</div>
    .portfolio-image-gallery {
width: 100%;
max-height: 510px; //cuz the images are 840*510 and 1080*510
height: auto;
}
    .portfolio-image-gallery img {
float: left;
width: auto;
}

    I can’t get it.. and I’d like to set the container width 100% only for the portfolio-items.

    Suggestions?

    Best,
    Davide

    • This topic was modified 8 years, 4 months ago by aderal2016.
    June 22, 2016 at 7:13 am #651942
    Rikard

    Hey Davide,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    June 22, 2016 at 8:41 am #651981
    aderal2016

    Hi,

    this is the link: http://aderal.es/proyecto/nueva-grafica-informes-idis-2016/

    Now there’s an image like a “collage”, but I’d like to upload the separated images..

    Best

    June 24, 2016 at 5:53 am #652836
    Ismael

    Hi,

    Did you try the Grid Row element under the Layout Elements panel?

    Best regards,
    Ismael

    June 24, 2016 at 10:04 am #652950
    aderal2016

    Hi Ismael,

    The Grid Row element is useful but in this case I think not. The point is that Grid Row requirements are minimum 2 cells and an exact proportion (1/3 – 2/3, 1/2 – 1/2 etc etc).

    I have 2 images: 840×510 and 1080×510.. and I’d like to keep this ratio. So This is why I’m trying with a code block and <div> + CSS..

    Do you have any other idea?:)

    Best,
    Davide

    June 28, 2016 at 11:49 am #654134
    Ismael

    Hi,

    I’m not sure if you can keep those ratio on different screen sizes. Your best bet is the grid row element or upload the two images as a whole.

    Best regards,
    Ismael

    June 28, 2016 at 12:10 pm #654148
    aderal2016

    Hi,

    so there’s no way using the code block element to set a <div class=”row”> that contains 2 responsive images at fullwidth?

    I tried following

    <div class="row">
<div class="column">
<img src="image/path/jpg" />
</div>
<div class="column">
<img src="image/path/jpg" />
</div>
</div>
    .row {
width: 100%;
max-height: 510px;
float: left;
}

.column img {
width: auto;
height: auto;
float: left;
}

    Best,
    Davide

    June 30, 2016 at 3:38 pm #655319
    Yigit

    Hi,

    Seems like you figured it out by using a single image instead? :)

    Best regards,
    Yigit

    June 30, 2016 at 3:42 pm #655321
    aderal2016

    Hi,

    yes right now I uploaded a “single image”.. but I’d like to upload each one separated with lightbox function.

    Any idea?:)

    Best
    Davide

    June 30, 2016 at 3:52 pm #655333
    Yigit

    Hey!

    As my teammates mentioned, your best bet is using a Grid Row element. You can refer to this post – http://kriesi.at/documentation/enfold/color-section-with-100-container/ and add 100% color section element to your page and add code block element inside it if you would like to create your section using custom code.

    Cheers!
    Yigit

    June 30, 2016 at 3:55 pm #655335
    aderal2016

    Hi:)

    I’ll try like this thank u

    Cheers

    June 30, 2016 at 3:57 pm #655339
    Yigit

    Hi!

    You are welcome :)
    Let us know if you have any other questions or issues!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Max container width per page?’ is closed to new replies.