Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 29, 2023 at 8:34 pm #1412104
    mary301187

    Is this possible? Color section with round corners.
    Like here, on the end of the page (contact)

    home

    thank you

    June 30, 2023 at 12:27 am #1412116
    Mike

    Hey mary301187,
    Do you mean this element:
    Enfold_Support_2481.jpeg
    This would be a column, a color section section is a full width element so the rounded corners would be at the edge of the screen and I didn’t see anything like that on your example page.
    But you could have rounded colors on a color section with css like this:

    .avia-section {
    border-radius: 50px;
}

    but then the background color for the #main container will show at the corners and if you are using parallax with any of the other elements this will show.
    Enfold_Support_2483.jpeg

    Best regards,
    Mike

    June 30, 2023 at 8:56 am #1412137
    mary301187

    Hey Mike,

    thank you.
    I know the round corners on a column. But how can I get there text left and image right?

    June 30, 2023 at 10:03 am #1412139
    mary301187

    Mike, another question: Look at the Screen Shot. I want the column in front of the footer, not behind.

    thank you

    June 30, 2023 at 3:46 pm #1412178
    Mike

    Hi,
    Try adding the custom class grid-column to your column, for this example I used a 2/3 column with a text block and a button and a image element:
    Enfold_Support_2485.jpeg
    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .grid-column {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
}
.grid-column .av_textblock_section,
.grid-column .avia-button-wrap {
	grid-column: 1;
	grid-row: 1;
}
.grid-column .avia-image-container {
	grid-column: 2;
	grid-row: 1;
}
@media only screen and (min-width: 1024px) { 
.grid-column .avia_textblock {
	 display: grid;
	 align-content: start;
	 justify-items: center;
     padding-top: 20%;
}
.grid-column .avia-button-wrap {
	display: grid;
    align-content: end;
    justify-items: center;
    padding-bottom: 20%;
}
}
@media only screen and (max-width: 1023px) { 
.grid-column .avia_textblock {
	 display: grid;
	 align-content: start;
	 justify-items: center;
}
.grid-column .avia-button-wrap {
	display: grid;
    align-content: end;
    justify-items: center;
}
}

    the expected results:
    Enfold_Support_2487.jpeg
    For your second question the column z-index will need to be adjusted, but we will need to examine your page to offer a solution.

    Best regards,
    Mike

    July 3, 2023 at 12:50 pm #1412332
    mary301187

    Hey Mike, thank you but it doesn´t work.

    Can you please take a look? And with the Z index too?

    That will be awsome.

    thank you very much!!!

    July 4, 2023 at 8:37 am #1412399
    Guenni007

    the link above is an example what you like to achieve? The enfold link is in private content?

    Think of that each column could be translated separately by the Element itself in advanced setting. So shifting the column outside the section is easy.
    And a z-index setting is included on the advance tab of that element.

    July 4, 2023 at 8:49 am #1412400
    mary301187

    Hey,

    no, thats the page – it doesn´t work.
    At the end of the “home” Page (Text, Button Photo).

    July 4, 2023 at 11:09 am #1412405
    Guenni007

    But this Page: https://www.mutrepublik.com/ is not an Enfold Installation – isn’t it ?

    July 4, 2023 at 12:48 pm #1412409
    mary301187

    no that ist the example how It looks like.

    My website is in private content

    July 4, 2023 at 6:01 pm #1412444
    Mike

    Hi,
    Thank you for the link to your site, it looks like you didn’t add the custom class grid-column to the 2/3 column, I added it for you:
    Enfold_Support_2520.jpeg
    Since you added a special heading element I adjusted your css to add it to the grid and I made some other tweaks, this is the css I added:

    @media only screen and (min-width: 1366px) { 
#top .grid-column {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    align-items: flex-start;
    margin-left: 15%;
}
.grid-column .av-special-heading,
.grid-column .av_textblock_section,
.grid-column .avia-button-wrap {
	grid-column: 1;
	display: grid;
}
.grid-column .av-special-heading {
	grid-row: 1;
}
.grid-column .av_textblock_section {
	grid-row: 2;
}
.grid-column .avia-button-wrap {
	grid-row: 3;
}
.grid-column .avia-image-container {
	grid-column: 2;
	grid-row: 2;
}
}
@media only screen and (max-width: 1365px) { 
	#top .grid-column {
		width: 100%;
		margin: 0;
	}
}

    I changed the min width for this to 1366px due to your column padding and width because that is when the image has enough room in the column when it’s split in half, below that the css will makes the column width 100% with the elements stacked.

    This is my demo example for future readers since your site is not public
    Enfold_Support_2522.jpeg

    Best regards,
    Mike

    July 4, 2023 at 9:01 pm #1412461
    mary301187

    thank you guys, it works <3

    July 4, 2023 at 10:29 pm #1412464
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Color section with round corners’ is closed to new replies.