-
Posts
-
To whom it may concern,
On my portfolio page, I have items listed within 1, 2 or more categories.
Above the gallery, there are options to filter the work by a certain category, however, if I click one that only has say 1 item, my entire gallery drops further down the page.
I imagine it has something to do with the fact that I have the colour block with which it is located set to be at least 100% of the screen space,
and I imagine that the gallery is automatically justified to the bottom of this block, rather than the top. I would prefer it was at the top so that it doesn’t jump around the page when the user specifies particular categories.*edit* having read the details on the colour block options – I note that it states “Content within the section will be centered vertically within the section” Can I make it so that the content is a fixed height from the top?
*edit mk2* In addition to the above question, is it possible to specify the percentage, I note I could pick 75%,100% etc. Could I perhaps choose 90% or is this not possible?Thank you and kind regards,
Oliver
Hey Oliver,
Sorry for the late reply!
I just checked your portfolio page and navigated between categories however i cannot see any issue. Have you decided to use 1/1 column element instead of Color Section element?
If not, to make we understand the issue clearly, could you please post screenshots showing the changes you would like to make?Your portfolio page looks really nice by the way!
Best regards,
YigitHello Yigit,
Thank you for your reply and your kind words.
I have changed the color section to a 1/1 column element as a quick temporary solution.
If I revert, the elements within the color section are centred vertically within the color section, so, if one category goes onto a second line, everything will shift upwards.
I like how it is showing at the moment, I just would like to use a color section, so I have more creative freedom. I just would like to remove the central vertical alignment. Is this possible?
Kind regards,
Oliver
Hi,
I tried login with the codes provided on first post and they are not working – could you please check?
Best regards,
BasilisHi,
Thanks for the update.
We can’t see the issue on the current portfolio page. Would you mind creating a test page so that we can see the issue?
Best regards,
IsmaelHello Ismael,
Currently the portfolio is not in a colour section. It’s a standard full width column. I’d prefer it to be a colour section so that I can make more creative freedom. However, when I choose colour section all elements within it are vertically centred.
I’d like to change the column into a colour section and have all elements to be justified to the top, is this possible?
Thank you, Oliver
Hi,
Thanks for the update.
We won’t be able to inspect the issue without actually seeing it. Please create a copy of the portfolio page and replace the column with a color section so that we can inspect the elements.
Best regards,
IsmaelIsmael,
The same issue is on every page on the portfolio – just click on one of the portfolio items – eg..g. http://oliverrees.com/portfolio-item/orchard_kitchenware/
Within the colour section the text is centralised vertically. On another page: http://oliverrees.com/portfolio-item/gyro_light/
It is again centralised vertically, but this means that where the words begin they are not at the same spot on the screen, I therefore would like to make the text at the top of the colour section, and then if I choose to have a gap I can define this myself by putting a whitespace break
Kind regards,
Oliver
Hi,
Are you referring to the portfolio overview page or the single portfolio page? I’m not really sure if we are on the same page here because you started the thread inquiring about the category sort. Screenshots will probably help us understand the issue better. You can upload the screenshots to imgur or dropbox.
Best regards,
IsmaelIsmael it doesn’t really matter what page you see it but for clarity here are two examples:
1. https://imgur.com/b3hiS5J
2. https://imgur.com/yv3YmRAThese are both single portfolio pages for each of these projects – one is complete and one is in draft mode.
They both consist of a colour block section, but this automatically makes the contents inside it align centrally along the vertical dimension.
This means that if the amount of text is not the same on two different pages, the alignment will be different and where the text section that starts “Brief” begins will be higher (or lower) on that page. This is demonstrated on the two above screenshots.I would like for the colour section to remain but for its content to be vertically aligned to the top rather than centre. This way I have complete control over where the text begins on that page.
Kind regards,
Oliver
Hi,
Thanks for the update.
The spaces above the heading of both portfolio items look the same unlike in the screenshot. (see private field)
Best regards,
IsmaelHello Ismael,
The first link isn’t working. What are you trying to show me?
Is it possible to have the content at the top of the colour section instead of centred?
Kind regards,
Oliver
Hi,
That is a portfolio item. Try this css code to adjust the vertical alignment of the content inside the color section.
.avia-section.av-minimum-height .container .content { vertical-align: top; }Default value is “middle”.
Best regards,
IsmaelThank you Ismael,
This has done exactly what I required for the left hand column, within the colour section. Every portfolio item is now vertically aligned to the top and are located at the same place on every page – fantastic!
My only problem now is that in the second column, on the right, where I place the logo and image of the design, whilst appearing within the advanced layout builder to be in line with the text on the left column, have a variation in heights, between being above the text, on each of the portfolio items, (e.g. GyroLight & Orchard Kitchenware).
What do I need to do here?
Thank you so much Ismael – we’re getting there! :)
Ollie
Hi,
Glad it worked. For the second column, edit the first column in the row and make sure that the “Equal Height Columns” and the “Vertical Alignment” settings are the same for every portfolio items.
Best regards,
IsmaelHello Ismael,
Yes all settings are the same.
I can only imagine that this could be because text boxes and images have different default paddings?
If this is the case, do you know what the might be? I can the add extra whitespace above the images, to make them align.
Kind regards,
Oliver
Hi,
Please recheck the settings. Some of them are set to “Individual Height” instead of “Equal Height”. Yes, you can use the separator/whitespace element to adjust it.
Best regards,
IsmaelHello Ismael,
I’ve made those changes. With equal height selected, the text in the left column and the image in the right column still do not align along the same line.
On my Orchard page I require a 45 pixel whitespace, and on my GyroLight page, it is a 30 pixel whitespace.
I could understand if they required the same padding, but they do not?
I still believe that whilst the first left hand side column is aligned to the top, the right hand column is not. Is there additional code that I require?
Kind regards,
Oliver
Hi,
Thanks for the update. We can see the issue now. A gap or whitespace is being created above the text block inside the first column, but we can’t figure out where it’s coming from. We tried removing the html manually but the space persists. It’s quite odd. Please use the separator/whitespace element temporarily to align the content.
Best regards,
IsmaelOkay thank you Ismael,
Please let me know if a permanent solution is created, so I remember to remove the whitespace if needed.
Thank you,
Oliver :)
- The topic ‘Masonry grid inside colour block’ is closed to new replies.