1 Reply Latest reply on Oct 11, 2016 9:36 AM by ankushr40215001

    Responsive image buttons scaling correctly

    philwiles Level 1

      Hi ladies and gents

       

      Hoping someone here can help me with this issue; although i can't seem to find a solution despite half a day of googling it

       

      Essentially I'm tying to create a responsive portfolio website to show off my work. The homepage will be images which act as buttons, each linking to a relevant project page. Each image button needs to have a rollover state where the image dims and the project name displays. I can create this fine using different layers of a .PSD button brought into my doc using Apple+B and selecting relevant layers.

       

      site_v1.jpg

       

      The problem is the responsive aspect – when the browser window shrinks the images do scale down correctly proportionally but their positioning goes haywire (see below) The images have borders on all edges the same color as the background (so they but up next to each other) are group together and have Resize set to 'Responsive width and Height'

       

      site_v2.jpg

       

      Is there any other way of accomplishing this? Perhaps using button states? I think Dani Beaumont achieves it in this site with 'Build the homepage' section (around 6:40) in the video, but I just can't figure out how to achieve it

       

      Responsive web design in Adobe Muse | Adobe Muse CC tutorials

       

      Any ideas or solutions gratefully received