问题描述:

I am stumped after a very humbling 15 hours worth of attempts. :/ I am doing a freebie because it looked like a simple opp to test theories for a device responsive site. Not. I have a feeling like maybe I am overthinking it. It is something I am working hard to learn. Any feedback or push in the right direction would be greatly appreciated. I am new to both HTML5 and coding for devices first.

Using: http://byevan.com/web-template/BuzzApp/

Test Site: http://justimaginewebdesigns.com/nathalie/mobile/

Image attached of what it should end up looking like on all devices.

Using a javascript to anchor the div for the links to the bottom.

Issue: Div container for links is not responsive in harmony with the bg image.

  • Using CSS3 for the main bg image make that responsive and the @media entries do their job although it is best viewed in landscape mode due to the bg image itself.
  • Using % based margins are inconsistent
  • Using % based relative positioning is inconsistent
  • Attempting to scrap keeping text and just using an image with hotspot rollovers fails miserably across devices.
  • Adding a left position attribute to the javascript mentioned above is inconsistent across devices.
  • Many more experiment attempts...

网友答案:

This should get what you're after for assuming you'll go with a mobile first design.You might need to add another few breapoints to get left margin right as the screen size increases.

You also should drop the image widths and heights off the navigation items and use

img {
width: 100%;
max-width: 100%;
}

and then set the widths of the images on the container divs.

.homelinks { 
             position:fixed;
             bottom:100px;
             left: 5%;
             -webkit-transition: all 0.3s ease-out; 
             -moz-transition: all 0.3s ease-out; 
             -o-transition: all 0.3s ease-out; 
             transition: all 0.3s ease-out; 
            }

 @media Screen and min-width(700px){
.homelinks { 
             position:fixed;
             bottom:100px;
             left: 26%;
            }}
相关阅读:
Top