-
AuthorPosts
-
June 21, 2016 at 11:39 am #651408
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, 6 months ago by aderal2016.
June 22, 2016 at 7:13 am #651942Hey Davide,
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
RikardJune 22, 2016 at 8:41 am #651981Hi,
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 #652836Hi,
Did you try the Grid Row element under the Layout Elements panel?
Best regards,
IsmaelJune 24, 2016 at 10:04 am #652950Hi 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,
DavideJune 28, 2016 at 11:49 am #654134Hi,
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,
IsmaelJune 28, 2016 at 12:10 pm #654148Hi,
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,
DavideJune 30, 2016 at 3:38 pm #655319Hi,
Seems like you figured it out by using a single image instead? :)
Best regards,
YigitJune 30, 2016 at 3:42 pm #655321Hi,
yes right now I uploaded a “single image”.. but I’d like to upload each one separated with lightbox function.
Any idea?:)
Best
DavideJune 30, 2016 at 3:52 pm #655333Hey!
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!
YigitJune 30, 2016 at 3:55 pm #655335Hi:)
I’ll try like this thank u
Cheers
June 30, 2016 at 3:57 pm #655339 -
AuthorPosts
- The topic ‘Max container width per page?’ is closed to new replies.