In the Astratic Theme, we have added new CSS classes that allow you to create an element in the full width of the screen. On one side there is a graphic / photo / movie and on the other side there is text on a colored background.
In addition, the element is responsive, it works so that on a small display the graphics / photo / movie will be positioned above or below (depending on what class we use) the text on the background.
How to use the CSS class?
- In the editor, add a group block:
![Group block](https://astratic.com/wp-content/uploads/2022/03/group-block-1.png)
- Set group width to ‘Full width’
![Full width](https://astratic.com/wp-content/uploads/2022/03/full-width.png)
- In the block settings, add one of the 4 new classes
![CSS classes](https://astratic.com/wp-content/uploads/2022/03/css-classes.png)
--half-cover-right-responsive-img-bottom
sets the photo / video on the right and with a small screen it sets the photo / video below the text
--half-cover-right-responsive-img-top
sets the photo / video on the right and with a small screen it positions the photo / video above the text
--half-cover-left-responsive-img-bottom
sets the photo / video on the left and with a small screen it sets the photo / video below the text
--half-cover-left-responsive-img-top
sets the photo / video on the left and with a small screen it positions the photo / video above the text
- Optionally, you can add a background color for the group
![Background color setting](https://astratic.com/wp-content/uploads/2022/03/background-colour.png)
- In the group, insert the block ‘Cover’
![Cover block](https://astratic.com/wp-content/uploads/2022/03/cover-block.png)
- For the ‘Cover’ block, select a photo or video from the media library as the background
![Cover](https://astratic.com/wp-content/uploads/2022/03/cover-1024x424.png)
- Set the ‘Cover’ block to the full width of the screen
![Full width](https://astratic.com/wp-content/uploads/2022/03/full-width-cover.png)
- In the ‘Cover’ block, click on the default paragraph and delete it.
![](https://astratic.com/wp-content/uploads/2022/03/remove-paragraph-1024x669.png)
- In its place, put a ‘column’ block and set it to 2 columns.
![](https://astratic.com/wp-content/uploads/2022/03/columns.png)
![](https://astratic.com/wp-content/uploads/2022/03/two-columns-1024x467.png)
- In the columns you can add blocks according to the standard editor functionality. An example of use is shown in the photo below.
![](https://astratic.com/wp-content/uploads/2022/03/media-and-text-1024x490.png)
Have any questions? It there anything we can help? Write about it in the comments below ????