Jump to content

Image resizing for different screens

Recommended Posts

Site URL: http://www.visitnewport.com.au

I've created a main banner image for the site I've designed. However, when the window/screen is resized I would like the text elements (within coloured triangles) to not disappear as they do currently.

To achieve this, I figure I can place 3 images on top of each other; one for the image/collage; one for the bottom left triangle and one for the top right triangle. In this way, the triangles could snap to the boundary/margin. However, I'm lost in terms of coding all this so that it will work when the screen is resized.

Alternatively, is it better just to create a number of different banner images to snap to various break points?

I have an entirely separate screen for mobile, which is working perfectly fine, so I don't need to rethink that element of the site.

Any thoughts on code for achieving this would be appreciated. Screengrabs attached.

Thanks.

 

 

Full_screen.png

When_resized.png

 

 

Edited by DallasDesignsStuff
Link to comment
  • Replies 5
  • Views 615
  • Created
  • Last Reply

Top Posters In This Topic

Hi, no I haven't. But for now, I'm happy to park it until I resolve a few other issues.

If you can, I wonder if you can help with a problem I'm having with my footer text. For some reason, I believe I've inserted some code somewhere that appears to be affecting the text (some of it is black, when I want all white). I can't seem to find which bit of code is affecting my footer.
I've tried inserting some code to convert the yui blocks, but that doesn't seem to have resolved it.
Sorry, coding isn't my strength.

Not sure if you can help with this, but let me know either way.

The site is http://www.visitnewport.com.au/

Screen Shot 2021-11-16 at 10.35.01 pm.png

Link to comment
On 11/16/2021 at 6:36 PM, DallasDesignsStuff said:

Hi, no I haven't. But for now, I'm happy to park it until I resolve a few other issues.

If you can, I wonder if you can help with a problem I'm having with my footer text. For some reason, I believe I've inserted some code somewhere that appears to be affecting the text (some of it is black, when I want all white). I can't seem to find which bit of code is affecting my footer.
I've tried inserting some code to convert the yui blocks, but that doesn't seem to have resolved it.
Sorry, coding isn't my strength.

Not sure if you can help with this, but let me know either way.

The site is http://www.visitnewport.com.au/

Screen Shot 2021-11-16 at 10.35.01 pm.png

Add to Design > Custom CSS

/* footer text color */
footer.sections p {
    color: white;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Okay tuanphan, I'm keen to look at resolving the issue I'm having with the header image of the website I'm designing. As stated in my first post, I'd like to either set up the banner so that the image constrains to the width of the site but I'm not sure how to go about that from a coding perspective.

See my original post. At this point, I'm just really wanting to know what the best approach would be to allow the graphics in the image to be legible regardless of screen size.

If I should repost this somewhere else, feel free just to let me know.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.