-
Posts
-
Hi,
I am setting up my first site and I want to create a marquee on the home page with some text over it that is aligned to the top of the image. I want the image and text to be responsive.
I created a row and set the background image of the row. I then added a text box element to the row and added code to make the text responsive.
The first problem I have is that as I am tweaking the max size of the text see what works best, the image size changes. I think this is due to the image being set as the background of the row. What is the best way to set up a marquee with the text where I can control the responsiveness of the image and text independently?
The second issue I am have is the I want the text to align to the top of the image and it is currently aligning vertically to the center of the image.
Any guidance would be much appreciated.
Best,
BrianHey Brian,
can you send us a link to your site so we can take a look? The background will always resize on its own to fit the screen width, you could make it static but then the image would simply get cut on the sides when you make your window smaller.
The aligning of the text can be changed with a bit of custom css when we see your site we can give you further guidance. Thanks!
Hi,
The site address is as follows: http://www.newvistaspace.com/nv/
The site is currently password protected: Buildingthings!With the marquee image, I would ideally like to have it crop off the right side as you resize your browser and then at certain break points resize/re-crop the image.
Brian,
Thanks for the link! Unfortunately, there is no way to control the way the background image resizes. This is all handled natively in the browser via CSS, and there is not a way to alter it. Regarding the spacing of your headline, there’s a great here that you should read (starting about halfway down) that goes into detail on why this happens and what you can do to remedy it.
Thanks!
May ask if there is a way to put text over an image other than putting the image as the background of a container?
Hey Brian,
that’s the only possibility. We recommend using a content band and then placing text over it. Is there any reason why you would not want to do this?
The problem I am having is in a desktop browser the image is displayed as a very slim band with the text above. I would like the image to be full height in desktop and adjust for tablet and mobile. Please home page on the link I shared above to see what I am talking about.
Ok, I think I figured out a solve. I set a visibility container excluding mobile and then included a gap with the spacing that worked for desktop/tablet. I then set a visibility container for mobile only and added a gap with the spacing that worked better for mobile.
I think that should work, but let me know if you have any better suggestions.
Hey Brian,
that’s a very good solution. Glad you figured that out!
