Slider Wide Image, with text overlay and no margin

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

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.