Problem positioning added text on Levels Readytheme SFNT page content

[lynnephelps]

I'm using the Levels ReadyTheme with some mods, and I'm trying to add some new text to the home page in the SFNT page content.

Originally, I had the three boxes below the hero image displayed 65 pixels higher (top: -65px;), so they overlapped the hero image. But when I added some text that I wanted snugged up under the three images, it left a gap as though the images were still in their original position. The "View additional industry solutions" looked silly, all by itself.

Here is the code with the elevated images; the slight-lift raises the images 65px (top: -65px;) but when I tried to do the same thing to the text, it didn't work. It is as though the browser has reserved that area for image display, despite their new position:

<div class="breaker clear"></div>
<div style="margin: auto;">
<div class="column whole medium-one-third align-center sfnt-promo slight-lift">
<mvt:item name="readytheme" param="image( 'sfnt_promo_left' )" />
<div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo slight-lift">
<mvt:item name="readytheme" param="image( 'sfnt_promo_middle' )" />
<div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo slight-lift">
<mvt:item name="readytheme" param="image( 'sfnt_promo_right' )" />
</div>
<div style="top: -65px; text-color: black;">
<p align="center"><a href="/industries.html"><strong>View additional industry solutions</strong></a></p>
</div>
<div class="breaker clear"></div>
</div>

[lynnephelps]

So then I removed the positioning and sure enough, the text is now snugged up to the three images that are back in their original place, but they won't center!!!

Here is the current code from the template:

<div class="breaker clear"></div>
<div style="margin: auto;">
<div class="column whole medium-one-third align-center sfnt-promo">
<mvt:item name="readytheme" param="image( 'sfnt_promo_left' )" />
<div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo">
<mvt:item name="readytheme" param="image( 'sfnt_promo_middle' )" />
<div class="breaker show medium-hide"></div>
</div>
<div class="column whole medium-one-third align-center sfnt-promo">
<mvt:item name="readytheme" param="image( 'sfnt_promo_right' )" />
</div>
<div class="breaker clear"></div>
<p align="center"><strong><a href="/industries.html"><font color="#000000">View additional industry solutions</font></a></strong></p>

</div>

Ideally, I want the images elevated and the "View additional industry solutions" tucked below the images without the vertical gap. Short of that, I would like the three images in their original positions but centered.

[lynnephelps]

I'm sorry, I'm trying to upload images but it says I'm over limit. Both images together are below the limit but I tried once and failed, I guess my uploaded images are still on the server.

[lynnephelps]

You can see the current status at https://www.sy-klone.com

[jsdva]

Promo images in levels are supposed to be 370px width (https://docs.miva.com/readytheme-doc...ls-customizing). Adjust those image to that width and you will be fine. Otherwise, you'll need to adjust the css for the section.

[kat_oakos]

For the <p> that's surrounding the text you want snugged up - have you tried putting a style of "position: relative; top: -65px;" like so:

<div class="breaker clear"></div>
<p align="center" style="position: relative; top: -65px;"><strong><a href="/industries.html"><font color="#000000">View additional industry solutions</font></a></strong></p>

[lynnephelps]

Brilliant!!! Thanks kat_oakos , that worked! Text is positioned properly, I was able to move the images back up to their overlapping position, and all is centered! You can see the result here: www.sy-klone.com

jsdva, I used the original images that came with the levels readytheme and matched that size, so I'm not sure why the documentation differs. Thanks for finding that reference, I will read more there.

[kat_oakos]

Happy to help! CSS positioning is a little...particular sometimes.