Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to configure the drag & drop Flexi slide content for MUSA

How to configure the drag & drop Flexi slide content for MUSA

Musa have the navigation bar, logo and social icon on top of the slider. So the content area will need to be configured to allow the content area to display properly.

There are 2 parts to the configuration:

1) Lower the content area

To make sure the logo do not cover your content, we want to move the content down.

  1. Click in “design” and into “edit html/css
  2. Click in “main_style.css” in the page layout to open the CSS page
  3. Here locate this code near the bottom of Flexi plugin’s css code

.flexi-caption{
margin: 2.5% 0 0 15%;
width: 70%;
min-height: 100px;
max-height: 250px;
overflow: hidden;
}
.flexi-caption .wsite-not-footer{
max-height: 250px;
overflow: hidden;
}

4. Here add this code: margin-top: 260px; . The code will then look like this:

.flexi-caption{
margin: 2.5% 0 0 15%;
margin-top: 260px;
width: 70%;
min-height: 100px;
max-height: 250px;
overflow: hidden;
}
.flexi-caption .wsite-not-footer{
max-height: 250px;
overflow: hidden;
}

5. You can change the 250px to any height you want if you have smaller or larger logo

2) How to increase dd content height restriction for Widescreen version

The height restriction for the drag & drop content is there to prevent the content get too much for the size of the image in mobile devices. If you are using very tall images, you may want to increase the height so you can fit more content. It is very important to test your site in mobile devices to ensure the increased height does not affect how the plugin display in mobile devices.

 

  1. Click in “design” and into “edit html/css
  2. Click in “main_style.css” in the page layout to open the CSS page
  3. Here locate this code near the bottom of Flexi plugin’s css code: 

.flexi-caption{
margin: 2.5% 0 0 15%;
margin-top: 260px;
width: 70%;
min-height: 100px;
max-height: 250px;
overflow: hidden;
}
.flexi-caption .wsite-not-footer{ 
max-height: 250px;
overflow: hidden;
}

4. The default height is 250px. You can change this to any height you like. An important note here is to not have the content area taller than your image. Since the content area already been moved down, it is important to take that into account when setting your content area height

5. Save & re-publish your site for the change to take effect