-
Posts
-
Hello folks,
I am creating a full width design by using multiple color-sections.
The section i want create need to look like this: https://prnt.sc/itpxsy
My result looks like this: https://prnt.sc/itpzbm
As you can see, the result is to much wide.
I did it by using 5 x 1/5 cells and put in 3 icon boxes and 2 image controls into, but it do not look as i want it to look.
https://prnt.sc/itq0t8But i want to have it look like the first screenshot – can you please tell me how i can archive the result i want?
Best regards,
Me
Hey ItsMeOnly,
Can you try to enable first Custom Css Classes: https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
then add a similar Custom Css Class name to the 3 columns for example my_col then on the 2 columns between those 3, create a similar name for the Custom Css Class. Then give us a link to the page in the screenshot, then we’ll try to give you css code that should work.Best regards,
Nikkois someone here who can help me with this problem?
by the way:
when i create the next part: https://prnt.sc/itw2vs
then i will get a next problem like this.Hi,
Yes, if it’s on maintenance mode please give us access, so we can atleast see your page.
Best regards,
NikkoFYI: the modification is needed for the following two areas (red rectangles)
http://prntscr.com/iu8baiThe elements of the two areas need to be centered and have a free space at their left and right outer sides,
such as shown on this two images:
here:https://prnt.sc/iu8dr5
and here:https://prnt.sc/itw2vsLet me know if you need more information,
Thank you,
Tom
Hi,
I tried to check your site the login credentials do not work.
What is the issue you are facing to create a layout such as https://prnt.sc/iu8dr5 ?
You can use 3 columns with custom css class name and use a pseudo-class to display the curves between the columns and hide them in mobile view.
https://stackoverflow.com/questions/6668577/using-before-css-pseudo-element-to-add-image-to-modal
Best regards,
Vinayactually the problem is not about hiding on mobile devices or not.
I explained the problems above and visualized them with the images.I have no idea about CSS and did that what @Nikko said only:
Can you try to enable first Custom Css Classes: https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
then add a similar Custom Css Class name to the 3 columns for example my_col then on the 2 columns between those 3, create a similar name for the Custom Css Class. Then give us a link to the page in the screenshot, then we’ll try to give you css code that should work.Best regards,
NikkoPlease check with the given credentials – they will work now – i have tested them and could login!
For explan the problem more clear:
This is what i want: https://prnt.sc/iu8dr5
This is what i got: http://prntscr.com/iuclvw
To much empty space where the red arrows are and not enough space where the green arrows are.
The whole stuff need to be more close together and with enough space at the left and right sides.
I need to have it like the first image shows.
Hi,
Thank you for sharing the screenshots and clarifying. To reduce the space between the elements please add the element inside a color section and reduce the width of the color section.
Color section is a fullwidth element and always takes up the entire width of the page container. Depending on your design you may want to make the color section take up less than 100% width of the page. To reduce the width of the color section please give the color section a unique developer ID and use the below CSS code in Quick CSS or child theme styles.
Please adjust the max-width value to suit your design.
#section-width { max-width: 80%; left: 50%; position: relative; transform: translateX(-50%); }Best regards,
VinayHi,
Thank you for the reply.
i think to reduce the width of the color section would not bring the solution as needed.
The whole Design bases on 9 color sections and if there are two smaller sections in the mdiddle then it would crash the design completelyNot?
Hi ItsMeOnly,
It seems to me that you need to enable the Advanced Layout Builder debug mode. Here is how to do it: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Copy the code for the icon boxes and put them is a text block and the elements between them. Do not put them in separate containers.Best regards,
VictoriaHi ItsMeOnly,
It seems to me that you need to enable the Advanced Layout Builder debug mode. Here is how to do it: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Copy the code for the icon boxes and put them is a text block and the elements between them. Do not put them in separate containers.Best regards,
Victoria@vijay
sorry but i do not need less then full width color sections. My design bases on 9 full width color sections, so your code would not help,
I tried with your css and got a smaller color section but my content did not center and the boxes did not stand more close together.
Thank you.Hi @victoria
I have activated the debug mode now.
The code of @vijay maked smaller the color sections only and did not help with what i want.sorry but I cannot understand that a template with so many purchases and good comments is it not able to center and minimize the distances of the content boxes by using the user interface of the layout builder.
Imho my requirements is no rocket-sience but whatever i tried i didnt work with Enfold
I used Enfold until 2 years with my old website design that worked fine.
Now i have purchased because of support and need your help!
@vijay
sorry but i do not need less then full width color sections. My design bases on 9 full width color sections, so your code would not help,
I tried with your css and got a smaller color section but my content did not center and the boxes did not stand more close together.
Thank you.This reply was modified
Hi,
To keep the colorsection width 100% and reduce the container width so the elements come closer together please use the below code
#section-width .container { max-width: 50%; }Best regards,
Vinayokay thank you – it worked and centered the icon boxes in this section fine.
I tried the same way for the next section but there it did NOT center the cells.
The container got smaller, sure but the 4 cels stay aligned left sided. – How to center them?
Hi,
Elements are always aligned to left in a color section.
If you use 1/4 column it will occupy 25% of the container width.
If you use 1/5 column it will occupy 20% of the container width.I have made the columns 1/4 please review the site :)
Thank you for using Enfold.
Best regards,
Vinayi didnt knew that You maked my day – YOU ARE MY HERO,
I am happy with my Enfold
thank you :-)
- You must be logged in to reply to this topic.