Announcement

Collapse
No announcement yet.

Problem positioning added text on Levels Readytheme SFNT page content

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Problem positioning added text on Levels Readytheme SFNT page content

    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>

    Lynne Phelps
    Sy-Klone International
    www.sy-klone.com
    Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

  • 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.
    Lynne Phelps
    Sy-Klone International
    www.sy-klone.com
    Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

    Comment


    • 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.
      Lynne Phelps
      Sy-Klone International
      www.sy-klone.com
      Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

      Comment


      • You can see the current status at https://www.sy-klone.com
        Lynne Phelps
        Sy-Klone International
        www.sy-klone.com
        Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

        Comment


        • 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.
          Jamie Donaldson
          JSDVS Web Design / Development
          Web Design | Web Development | E-commerce Design & Integration

          Comment


          • 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>

            Comment


            • 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.
              Lynne Phelps
              Sy-Klone International
              www.sy-klone.com
              Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

              Comment


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

                Comment

                Working...
                X

                This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                Accept