• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Slider Wide Image, with text overlay and no margin

Home › Community Forums › Epik Theme Support › Slider Wide Image, with text overlay and no margin

  • This topic has 8 replies, 5 voices, and was last updated 8 years, 5 months ago by natechie.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 20, 2014 at 6:41 am #10812
    GuiLois
    Customer

    Hi guys, Im getting the feeling there is no way to do this or I need to stop spending time and contract someone in because it is too complicated. One last call out to anyone who can help please ๐Ÿ™‚ :

    In Slider Wide widget, I have added an image. The image is the width of the screen and reduces in size depending on the device viewing the website.

    Overlaid is text, aligned to the right and positioned at a point half way down the image.

    I have used <DIV STYLE=”position:absolute; top:152px; left:82px; width:50%; height:30%”> to get the text to float above the image.

    Two problems I can not overcome:

    1) The image sits center of the screen nicely but there is a gap, a margin below and above I am trying to minimise or reduce. I have reduced .slider-wide .wrap margin to ‘0’and .slider-wide widget margin to ‘0’ .

    How can I reduce the margin top and bottom to zero?

    2) The text that floats above the image in Slider Wide looks fine in a big screen view but as you reduce the screen size and the image reduces nicely, the next begins to float above other areas outside the Slider Wide widget. So it seems the positioning code is not restricted to the widget but positions across the website as a whole.

    I’ve tried a few options including putting the image into the background of a table so that the structure of the table holds the text in place but then the image doesn’t respond to screen size changes.

    How can I make the floating text stay within the Slider Wide widget area?

    Thanks

    February 20, 2014 at 11:26 am #10820
    GuiLois
    Customer

    typo on 2) should read,

    2) The text that floats above the image in Slider Wide looks fine in a big screen view but as you reduce the screen size and the image reduces nicely, the text begins to float above other areas outside the Slider Wide widget. So it seems the positioning code is not restricted to the widget but positions across the website as a whole.

    February 21, 2014 at 9:01 am #10850
    GuiLois
    Customer

    Maybe its just better to find a plugin or special widget that allows me to use a single image with a text overlay?

    February 21, 2014 at 10:25 pm #10865
    Eric
    Customer

    A plugin might be the best option….Either that, or hiring a developer to make this customization for you.

    Definitely check out WP.org (for free plugins) or Codecanyon if you’re looking for Premium plugins.


    I create awesome sites for awesome people! Contact me if interested โ€“ ericsanchez1585@gmail.com

    February 22, 2014 at 5:40 am #10869
    GuiLois
    Customer

    Thanks Eric, I’ve taken a look via plugins and also code canyon with no results for top image with text overlay or floating text.

    I think it is something that perhaps comes with the right theme. Im hoping to get a response at APpfinite for contract work asap.

    THanks

    February 26, 2014 at 9:09 am #10986
    atomicduo
    Customer

    Hi GuiLois,

    The thing I can help with is the reduction of the padding which we fixed with some custom CSS. Have you reduced the header padding as well?

    Look below for our full code changes for the spanning slider. Next I am going to work on the floating text & actually having a nice looking button.

    /**
    * customization
    */
    .flexslider .slides img {
    width: 100%;
    }
    .slider-wide .widget.genesis_responsive_slider{
    margin-bottom:0;
    }
    .slider-wide .wrap{
    margin-bottom: 0;
    padding-top: 0;
    }
    .head-wrap{
    margin-bottom: 0;
    }

    Hope it helps.

    March 2, 2014 at 6:34 pm #11083
    puck55
    Customer

    I’ve been looking to accomplish this exact same thing on http://rockhurst.co. Atomicduo, your advice has worked perfectly. I’m eagerly awaiting your floating text and button code.

    March 4, 2014 at 2:58 am #11134
    GuiLois
    Customer

    Hi atomicduo, thanks for that. Yes, all padding now done.

    For the landscape background with floating text there are a number of online tutorials but they are complicated. Also, consider when your image responds to smaller sized screens what you want the image to do. It will automatically shrink in size but there seems to be options to either align left to show just the left (or other) part of the image (if it is simply a background) or you can crop to a specific position of the image as it becomes responsive.

    ALl is a bit over my head right now!

    August 25, 2014 at 11:42 am #13644
    natechie
    Customer

    GuiLois, did you ever find a solution for the text overlay overflowing into other widget areas? I have the same issue you experienced.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now โ†’

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us โ†’

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 ยท Appfinite ยท Built With The Genesis Framework