Reposition text below images in Meta Slider

I have a website where I am utilizing Meta Slider within Wordpress. I would like to position the captions below the images instead of on top of them. Meta Slider claims this feature is only available in the Pro version, but could it be achieved by adjusting the CSS to reposition the captions? I attempted using margin-top to no avail. I'm wondering if there is a simple CSS solution for this?

http://66.147.242.87/~briantur/sound/

Here is the CSS code I tried:

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    margin-top: 100px;
    width: 100%;
    height: 100%;
    left: auto;
}

Thank you for your assistance!

css

Answer №1

To achieve the desired effect, insert the following snippet of code:

metaslider .caption 
{
    position: absolute;
    top: -100px;
}

Answer №2

As of May 2016... To make a quick adjustment to your website, you can use a ftp program such as Filezilla and your preferred code editor like Bluefish or cPanel File Manager - Edit;

Connect via sftp to your website and locate the following directory: public_html/ (as in wordpress/ or wherever WP may be:) /wp-content/plugins/ml-slider/assets/metaslider/ ... then proceed to download, edit and upload: public.css

To disable line 20, simply add these characters /* ... */ before position: absolute;
Here's how it should look:

 /*   position: absolute;   */

Here is the entire section with line 20 commented out: 

.metaslider .caption-wrap {
 /*   position: absolute;   */
    bottom: 0;
    left: 0;
    background: black;
    color: white;
    opacity: 0.7;
    margin: 0;
    display: block;
    width: 100%;
    line-height: 1.4em;
}

This simple change will not affect the responsive design of the page.

Refresh the page to see the modifications take effect.

You might need to delete your browser's cache for the adjustments to appear.

In addition, adjust the image Height to be larger than what is set in the Meta Slider interface.

(.../wp-admin/admin.php?page=metaslider)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the background color using CSS according to the browser's dimensions

I'm having trouble identifying the issue with this code. The background color remains white and doesn't change as expected. <style type="text/css"> h1 { position: absolute; text-align: center; width: 100%; ...

htmlcssmedia-queriesbackground-color

What could be causing my table to malfunction in IE8?

Is it just me, or do my CSS tables not work on IE8? <div class="main-table"> <div class="row"> <a class="secondary-table" href="#"> <div class="secondary-row"> <div class="secondary-cell"> ...

htmlcssinternet-explorer-8

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js

issue with the margin-bottom property not functioning as expected

Question about CSS code: .dropdown-menu { position:absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ff ...

htmlcssdrop-down-menu

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc

Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course ima ...

javascripthtmljquerycss

Achieving a horizontal alignment of these four div elements containing images

I need some assistance with aligning the divs using the .acontainer class. It was working perfectly before adding the images, but now it's all messed up. I've tried various adjustments and searches online, but I'm still stuck. Thank you for ...

htmlcss

Exploring the combination of Tailwind CSS variants with Framer Motion capabilities

Is it possible to integrate tailwind css classes with framer motion objects effectively? const variant = { hidden: { 'w-0' }, visible: { width: 400, transition: { type: 'spring', stiffness: ...

cssreactjstailwind-cssframer-motion

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Displaying divs inline with overlapping child divs

As a beginner in CSS, I tackle the challenges of learning it every day. Despite feeling clumsy and not naturally adept at it, my determination is strong (although sometimes my brain feels like an old computer on the verge of overheating). My current goal i ...

htmlcss

How to remove checkbox border using HTML, JavaScript, and CSS

Is it possible to remove the square border from a checkbox in HTML? ...

javascripthtmlcss

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

I am attempting to create a unique animation for a header div that involves moving it to the top of the screen when the user scrolls down. Once the header div reaches the top, I want it to stay fixed in that position. As the header div moves upwards, it wi ...

javascriptjquerycssanimationfullpage.js

Modify Bootstrap Card Styling Using JavaScript

When the clock strikes certain evening hours on my website, the Bootstrap card's default light style no longer fits the dark theme. I've attempted to switch the card to a dark style by tying in some JavaScript code, but it's not quite doing ...

javascripthtmlcssbootstrap-4

Modern design featuring soft borders that blend into the background

I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I ai ...

htmlcsslayoutfluid

Personalized Horizontal Radio Button Design

I have been struggling to achieve the desired design for radio buttons but without success. https://i.sstatic.net/TU7Ks.png Despite using bootstrap for my website, I am only able to achieve this: https://i.sstatic.net/WbzqS.png This is the code I am cu ...

htmlcsstwitter-bootstrap

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multip ...

javascriptcss

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

cssgoogle-chromegoogle-chrome-devtools

Issues arise when inline elements are not behaving correctly when placed alongside inline-block elements

Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific e ...

htmlcsswebinline

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...

cssmaterial-designhtmlmaterial-design-lite

What are alternative methods for creating a table layout without relying on traditional table elements?

Is there a way to eliminate tables from my code and achieve the same layout in the name of progress and learning? Here is an example of the table I currently have: <table cellspacing="0px"> <tr> <td> <img src= ...

htmlcsshtml-table