frame as circle

Hey zpl-limmattal,

Please try the following in Quick CSS under Enfold->General Styling:

.home #av_section_1 .sc-av_one_third {
   height: 360px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

Please remove the previous css, then add the following code in the functions.php file. This should dynamically adjust the height of the columns based on their width.

//--------------------------------------------------------------
// adjust the height of the columns
//--------------------------------------------------------------
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
	$(window).on("debouncedresize", function() {
            $(".sc-av_one_third").each(function() {
                var column = $(this).find(".av_one_third");
                var width = column.width();
                column.height(width);
            });       
	});
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

Hi,
Please try this function instead:

function make_column_height_equal_to_width() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
	$(window).on("debouncedresize", function() {
        $(".sc-av_one_third").each(function() {
            var column = $(this).find(".av_one_third");
            var width = column.width();
            column.height(width);
        });       
	});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'make_column_height_equal_to_width');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
To center the content in the 1/3 columns on mobile try this css:

@media only screen and (max-width: 767px) {
	.responsive #top .sc-av_one_third .flex_column_table_cell.av_one_third{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}

After applying the css, please clear your browser cache and check.
Also please check the other pages on your site to ensure that this css and the custom script to make the columns have equal height and width is not causing any issues elsewhere, if so I recommend adding a custom class to these round elements on your homepage. Is this the only place you are going to use them or do you plan on using them also on other pages?
As for their size, on mobile columns are set to be full-width, if you want them smaller we can assist but how much smaller do you want them to be?

Best regards,
Mike

Hi,
I added the custom class onethirdcircle to the three circles in all three languages and then adjusted the script to look for this class.
I then added this css in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field for all three languages to center the text on mobile and cleared your cache for each language:

@media only screen and (max-width: 767px) {
	.responsive #top .sc-av_one_third .flex_column_table_cell.onethirdcircle {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}

Then to reduce the size of the circles and center them horizontally for mobile I added this css in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field for all three languages to center the text on mobile and cleared your cache for each language:

@media only screen and (max-width: 767px) {
	.responsive #top .sc-av_one_third .flex_column_table_cell.onethirdcircle {
		max-width: 300px;
		margin: auto !important;
}
}

In my tests this is the smallest that you can use in all three languages and still have it look good based on the words, is some languages the words are too long without a break so it doesn’t fit in the circle well. Perhaps if you made the font smaller you could have a smaller circle but then would the text easily be readable?
You can test further if you like, please clear your mobile browser cache and check.
Please see the screenshot in the Private Content area of the mobile results.

Best regards,
Mike

Hey!

Glad we could be of help. Please feel free to open another thread if you have more questions about the theme.

Have a nice day.

Regards,
Ismael