I just wanted to get some feedback on what you all think would be the best possible way to post this promo on my company’s home page - other than just dropping in the image as a complete thing.
I think it best to break it apart into all its elements with different classes for styling, linking, etc. I designed this in photoshop and of course have the layered file.
Of course we’d want it to look great on all devices. Please keep that in mind.
Could you show a screenshot of the homepage and a screen shot of the homepage + promo block ? It’s not evident to understand the context and the boundaries of your promo. Thanks!
I started putting together a quick example and somehow strayed from that path, but I did setup the structure with an outer frame and an inner frame, and then setup 4 divs for Left, Top, Right and Bottom and then postioned those absolutely within a parent div with relative position.
I gave each corner div a radius on different sides and a white border on one side.
Thanks Dave. I was actually thinking of using the entire image as a background image of a section. However, I would first remove all the image and text element leaving me with the background and the black area flattened as a jpg. Once that’s in place, it is a matter of using a 2 column table inside a container and laying out the left wall light image in the left table cell and the right side text elements in the right side table cell, as different elements with dif classes stacked on top of each other. With me?
The issue is though on a smaller phone screen… the entire section will be too small when looking on phone in portrait position. I think it will be ok in landscape mode, meaning big enough to read and see the section.
Hi @sethregan, sure you can do that, just remember that the scaling of the background image, will be separate than the scaling of the content inside the element having the BG image. So the bg image might get cropped or zoomed, depending how large the background image is.
One suggestion, is to use z-index layering with all elements having an absolute position within the parent div, with the image having the lowest z-index and other elements layered on top using flexbox.
What if I just drop in the entire image as a jpg. It will take a bit longer to load but not much.
Question while i have you… for the life of me I cannot remember how to get rid of an active Symbol. Can you advise me on that? If you look back at the site preview, you’ll see I’ve started making some changes towards this new promo, but I am unable to remove the symbol currently there… “Sale Section symbol”. I’d like to remove it and just have the section with no symbol.
It seems to be ok as a single image but I’m having trouble with portrait and landscape in phone sizes. I’m getting black above and below the image on both those modes. Any thoughts?