While using the Elementor Slider, I came across one small, but all the worse bug. When the Slider is displayed full-width, it is not possible to set the text of each slider to maintain a fixed width of the main container content. The result can look like. like this:
In green I have marked the boundaries of the container, i.e. the main “column” where the content of the whole web page is located. Unfortunately, the slide content cannot be aligned to start at the beginning of the container. So we’ll want to move all the content to the right, inside the container. This is achieved with simple custom CSS code.
Let’s do it
First, we insert a new row, setting the width of the content to “full width” and the space between columns to “no space”.
Insert a new element -> “Slides” – inside this line. Set the background and text. For illustrative purposes, I have used only one slide. In the “Style” section, set the alignment to the left (Horizontal position). This will achieve what you see in the first picture.
Insertion into the container
Now we need to do two things. Find out the width of the container and insert the slide content into the given width.
If you haven’t changed Elementor’s basic settings, every page in Elementor will have the container set to 1140px wide. This way you can go straight to the second step. If you have changed the settings, you can see the value you entered in the global settings of Elementor -> Layout. This is then used instead of the 1140px value.
To insert content into the container width, we use simple CSS code. I recommend adding it directly to the Slides element. In the tabs, click on the “Advanced” section and at the very bottom we have the option to add our own CSS code. Since we are inside Elementor, we can use the magic selector “selector”. The exact name of the class we are going to modify is “swiper-slide-inner”.
@media screen and (min-width: 1025px) {
selector .swiper-slide-inner {
width: 1140px;
max-width: 100%;
padding: 25px;
}}
This is very simple CSS that we use media queries to restrict to use on displays larger than 1025px wide (i.e. computers). We set the width of the section to 1140px, but use the max-width property to limit it to 100% if the display is smaller than 1140px. Set 25px padding to ensure that the text will not “stick” to the top or bottom of the screen if it is longer. And finally the result
I have been programming websites since 2006. I have worked in several smaller and larger companies, always as a developer. I know how to program in PHP and lately I have been exclusively working on small and medium-sized projects in WordPress.
