- This topic has 8 replies, 5 voices, and was last updated 8 years, 5 months ago by
.
-
Posts
-
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
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.
Maybe its just better to find a plugin or special widget that allows me to use a single image with a text overlay?
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
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
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.
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.
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!
- You must be logged in to reply to this topic.