-
Posts
-
I would like to add more than 5 images in a single row.|these would be to display categories ( A lot of them) for products
Is there a way to add 6 or even 8 images across a single row ?
Thanks
place a color-section and with custom class like: eight-columns
put in your color-section 8 columns ( maybe 5th one) – put in those columns your content ( images)
place this to your quick css:
.eight-columns .entry-content-wrapper.clearfix { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .eight-columns .entry-content-wrapper .flex_column { flex: 0 1 10%; margin: 0 !important; }see here for info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
see a working example: https://webers-testseite.de/8col-flex/
And see what happens if flex is set to allowed to grow items and flex-wrap is on wrap. etc. pp – see example page
Edit : and if you like to have 9, 10 or what ever you like adjust %value or set the absolute width ( for those columns allowed to wrap
not working
I see here you dont have .page-id-34836 here but you do in your sample page.So added a color section and added 8 columns. 5 on one row and 3 on next. (5 is all that fits on one row)
I added my page id. Put section ID in and saved and cleared cachebut still it only shows with 5 images across
.page-id-2. category-images .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}.page-id-2. category-images .entry-content-wrapper .flex_column {
flex: 0 1 10%;
margin: 0 !important;
}and yes 9,10 or more would be good
The page id is just on my page because i do not want to influence the other example pages on my test site. The custom Class makes it specific enough.
But for me it is nice to have here on my page the page id just to remind me where i used that css code.i guess the category-images is your custom class? see where the dot is of the class on your code!
.page-id-2 .category-images .entry-content-wrapper.clearfix { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .page-id-2 .category-images .entry-content-wrapper .flex_column { flex: 0 1 10%; margin: 0 !important; }Hi,
Thanks for helping out @guenni007, let us know if you should need any further help on the topic @wealthyone.
Best regards,
RikardGood pick up and yes great idea to limit it to one page id
However still not working
So I added a color section and put category-images in the Developers: Section ID
Added 8 image elements in the color section.Then added this code to the Quick CSS
.page-id-2 .category-images .entry-content-wrapper.clearfix {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
}.page-id-2 .category-images .entry-content-wrapper .flex_column {
flex: 0 1 10%;
margin: 0 !important;
}Cleared cache, reloaded and still not showing more than 5
Even tried different browserSo I added a color section and put category-images in the Developers: Section ID ???
what do you read here class or ID ? : https://kriesi.at/support/topic/add-more-the-5-images-in-a-row/#post-1095851
place a color-section and with custom class like: eight-columns
IDs got # in front of element name
Classe get a dot . in frontso if you put in that phrase to Section ID :
.page-id-2 #category-images .entry-content-wrapper.clearfix { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .page-id-2 #category-images .entry-content-wrapper .flex_column { flex: 0 1 10%; margin: 0 !important; }That is the reason why i always like to have the link to the concerning page
you can see that it works on my test plattform! ?If you do not see the custom Class Input Field on Color-Section go to: Enfold-Child / Layout Builder / Show element options for developers
mark that fieldFinally got it working
Yes I see now I misread the custom class like: eight-columnsAnd thankyou for your perseverance..
Guess I need an early nite. too tired and not seeing dot and # properly hahahaJust got to limit it to a certain number now.. has 15 across at this stage haha
EDIT so if I only want eight, should I put the next 8 in a separate color section??
Yes – and that is the reason why i use for it classes. IDs should be unique on one page. So next row with 8 columns in new color-section – same custom class. ( And you can take what ever you like to use ( for 8 maybe 1/4th columns looks nicer on layout builder backend ) as columns ) ( See the example page on the bottom the two columns are enfold 1/5the columns – but with flex modell they react as 1/2 )
if you see my homepage – you can see that i have alternating image – text 1/2 columns
but if these 1/2 go to responsive case and to 100% width there will be image on top of text – that can be reached with this too.
On Enfold standard behavior this would end in text text image image text text etc.
You can even set the items order if columns are responsive. ( https://guenterweber.com/ )Perfect
Thanks Guenni007You should work for this grew, your good at this..
at least as a volunteer ModeratorQuick Question to Enfold staff
Currently is I have 3 on a row, it is set to full justifiy them ( spread them over the full page)
What would I change or add to left justify them. ( so if I have 3 one the last row)Also. When I check this on a mobile device ( I have a color section, with a column, then an image with a caption.) the words do not shrink and eventually you can not see anything except little boxes
https://pasteboard.co/IcNQ32H.png
is there a way to make that mobile responsive as well
Guenni007
Thanks anyway.
But as it is a Dev site on my PC it is hard to show you the siteCan Enfold Staff please help further
Hi wealthyone,
We too need to see the actual html and css. Please get back to us when you have the website on some testing server.
Best regards,
VictoriaWill it allow me to do more than 5 tho.
As I have at least 45 Categories with more being added.
And shrinking them in size.If so yes that would be a possible solution..
Is it the Masonry option under Content Elements.
Ok seem to have it but when I click a category, it will sometimes only load a few, abd when I click Load More it will load more but some or all are duplicated
If you insert a custom class in a color-section will be an ID not a class
#eight-columns .entry-content-wrapper.clearfix { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } #eight-columns .entry-content-wrapper .flex_column { flex: 0 1 10%; margin: 0 !important; }Hi wealthyone,
You need to build the tree structure, like categories and subcategories. Have you tried it?
Best regards,
VictoriaHi aforta,
Please start a separate thread, describe your issue there and give us a link to your website.
Best regards,
VictoriaHi Victoria
Not sure what you mean by tree Structure?
each of the categories are there own category, with no sub category.Would a tree structure stop the Duplication of items when ‘More” is clicked??
- You must be logged in to reply to this topic.