Circle "column background" across all devices

[j300bac]

Hi Pro Theme,

Experimenting with some new material and I would like to achieve column circle backgrounds across all devices on my test site.

I have achieved the below using 13vw top, 13vw bottom and a 25px gap element - but the circles don’t maintain their shape on different screen sizes. I would also like to adjust the size of the circles to smaller in some cases but there is no margin setting in the column.

I’m probably missing something but there isn’t anything that I can find in the forum to figure this out if there is a built in way.

I have listed my staging site login in a secure note although it shouldn’t be necessary if it’s obvious.

Many Thanks

J

[jade]

Hey J,

it would be tricky to implement this especially the image height and width changes depending on which devices you are viewing the site.

To resize the actual video background file to a 1:1 or a square dimension as well as the poster image. Then apply a 100em border radius to the background video and image.

Hope this helps.

[j300bac]

Hey Jade,

Indeed I will likely change the sections according to devices to get the right finish I think. Just wanted to know if there was a way to do it is all. It maintains a circle quite well across bigger devices but I figured it’s pretty normal to want to achieve a circle with having the border radius tools…

Re - resizing vid to a 1:1. That doesn’t seem to be a good idea unfortunately but thanks for trying. I have done this on the top circle as you can see. On a larger screen the video border emerges whereas on the next circle the video maintains a well balanced background using a 720x480 ratio.

Is there a way that I can adjust the size of these circles at all? Or do you know a different way to achieve the same effect that I am getting?

Many Thanks

[thai]

Hi @j300bac,

To change the size of column on the small screen sizes, please add this element CSS to your column:

@media (max-width: 767px){
     $el {
          width: 100%;
          height: 250px !important;
          padding: 0 !important;
     }
}

Let us know how it goes!

[j300bac]

Hey Thai,

It goes very well thank you very much for that - I shall keep that in mind for future work

Many thanks once again for the best theme support to date.

J

[jade]

You’re most welcome and thank you for the kind words, J.