Skip to main content
Known Participant
February 15, 2017
Answered

Responsive Images

  • February 15, 2017
  • 2 replies
  • 1357 views

I would appreciate help with making the two logos and the main image responsive.

here is the link:  Page Title

Also is there anyway I can get the text in the header at the top of the page,  Preventive Law .... to stretch out responsively? It's fine on mobile but I need it to stretch out on a large screen.

Thanks in advance!!!!!

D

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Bitmap images on Hi-Res screens look blurry & distorted when re-scaled.   The better option is to re-create your logo and text as a vector image in Illustrator and export to SVG (scalable vector graphic).  SVGs are sharp & maintain crisp lines when re-scaled.    See screenshot below for Illustrator Export options.

    Once your SVG is created, you can embed it into your web page with an <img> tag.

    Nancy

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    February 16, 2017

    Bitmap images on Hi-Res screens look blurry & distorted when re-scaled.   The better option is to re-create your logo and text as a vector image in Illustrator and export to SVG (scalable vector graphic).  SVGs are sharp & maintain crisp lines when re-scaled.    See screenshot below for Illustrator Export options.

    Once your SVG is created, you can embed it into your web page with an <img> tag.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Known Participant
    March 9, 2017

    Thank you so much!  I am still having a problem with the images changing sizes for the various resolutions.  For example, when I look at the 375 x 667, I would like to see the scales reduce and move to the left and the image that says Preventive Law Reporter go to the right of the scales rather than below.  Thoughts?

    Page Title

    Next up, in the main body area I would like to add a pop up landing page to offer a report and capture their email.  Are pop ups the way to do it or not?  If you could point me in that direction I would appreciate it, thanks you so very much in advance.

    Donna

    February 16, 2017

    You can make images responsive with the max-width property. This link below can be a good start.

    Responsive Web Design Images