-
Posts
-
Hi Guys,
I’ve been playing around with different ways to display a full width image, with captions, at the top of the landing page. Initially I had the image as a full width slider with captions, but I couldn’t get the captions in the right place. It is now a colour section with background image, with the captions as special headings. However, whilst I can manipulate the caption position with whitespace, it appears completely different depending on the screen size.
Because of the images I’m looking to have the captions appear in the same location relative to the image for every screen size.
Is this possible? or how can I get closest to what I’m looking for?
Thanks
Hi tommyp15!
They are displaying in the same spot for me. Are you trying to make them 100% width on all screen sizes? Go ahead and take a screenshot and highlight exactly what your trying to do so we can get a better idea.
Best regards,
ElliottHi Elliot,
Yes I want the background image to be 100% of the browser window (as I have an arrow graphic to indicate people to scroll). My issue is that on different screen sizes the position of the captions changes. I have taken screenshots on different browser sizes to illustrate. You can see that the caption position changes in relation to the bike’s wheel and the lamp post. Ideally I would be able to fix the position in relation to the image so that the captions have the maximum effect, without being distorted by the background image.
Is this possible in any way, or should I change the layout so it is not 100%?
Thanks
Tommy
Hi!
Looks like you add columns and separators to create spaces. I think this is not the right way to do this. Please use the full screen slider then add the caption. The problem with the current layout is that some of the containers are percentage base so the size will vary on different screen resolutions. If you force to use this layout, you will have to create tons of css codes to modify the separator height, move the column position etc.
Regards,
IsmaelHi,
The problem that I had with Full Screen Slider is that the positioning of the captions was not flexible enough and I could not get the font size or style how I wanted. The other issue is that the full screen slider is showing as more than 100% of the browser screen, i.e. the picture is too tall for the screen and doesn’t adjust.
How do I configure the Full Screen Slider to show as I need?
Kind regards
Tommy
Hey!
If you want the image to be displayed full then it would be best to use the fullwidth easy slider instead of the fullscreen slider. If you want the image to display 100% width / height in the fullscreen slider, we can do that, but keep in mind that it’s going to look very scrunched and distorted, especially on small screens such as phones.
As for the captions, it looks like you switched to using columns and special heading elements instead.
Cheers!
ElliottHi. Like tommyp15 I can’t get the captions in the right place on my full width slider.
I’m using Replete and have a few format issues/questions:A) Position of frame/text is off – I set it to bottom but it’s off-center (in desktop Firefox and iPad Safari)
B) How to change color of ‘frame’ (behind text/over image)
C) Slider is very wide but frame isn’t the full width – how do I fix this
D) How do I make text a single line (will fixing frame width help?)
E) How do I stop ‘Big’ option from being all caps?You can see my slider here: http://5de.0aa.myftpupload.com/
Thx for your help as always
Hi!
@ATX: Please create a new thread in the Replete section. Thank you. I checked the site and it’s using the NivoSlider instead of the theme’s default slider.Best regards,
Ismael
- You must be logged in to reply to this topic.