asked on

Styling of Masthead

There are two images, side by side, in the "masthead" portion of www.mauivacationrental.com/location.htm When the window is progressively narrowed, the images shift from side-by-side to vertically-stacked, and then the images become reduced in size. I would like the images to remain side-by-side unless the window is much smaller. If you examine the behavior of the menu buttons, or the row of logos toward the footer, they also shift from side-by-side to vertical, but they remain horizontal until the window is quite narrow. By contrast, the images in the masthead collapse to a vertical orientation at the slightest narrowing of the window. Thank you for your assistance.

p7affinity-1-01.css global-css.css

SOLUTION

SuperiorWalrus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

In general, you want to have a container div and then a left and right. The simple way for this is something like this

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .left{width:65%;float:left;}
    .left img{width:100%;}
    .right{width:35%;float:left;}
    .right img{width:100%;}
    </style>
</head>
<body>
<div class="container">
 <div class="left"> 
<img src="http://www.mauivacationrental.com/images/logo1.png">
  </div>
  <div class="right">
<img src="http://www.mauivacationrental.com/images/location-title.png">
  </div>
  
</body>
</html>

Open in new window

Even better, use media queries and I can see you have started that

/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {

Open in new window

For each screen width, set the image to a different size and possibly use different images at 100%. This will give you the best readability because scaling type in images does not always come out great.

Looking at what you have in your header, there is no reason for any of the text to be an image. You would be much better off if that was clear text. You can use a font from https://www.google.com/fonts or https://typekit.com/ or a handful of others. By using clear text, it will be searchable by google/bing and you can make it much easier to read.

I may have mentioned this before, but if you are trying to make a site responsive, it starts out easy but as you can see gets a bit complex. I like to use bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/ as my core responsive grid.

There are a lot of choices on how you can do this and get the same visual effect.

Scott Fell

>Now we need support for IE as it does not understand the max-width

what? Please see http://caniuse.com/minmaxwh

Also, conditional statements are not supported as of ie10 http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

The website is obviously originally done a long time ago and is being upgraded...let's help him move forward and not back....

ddantes

ASKER

Thanks to both experts. The second expert's solution maintains both images inline, no matter how narrow the window becomes, but that wasn't my intention. I think I didn't articulate the question clearly.

In order for the size of the images to be adequate on a small screen, they need to shift to a vertical configuration. But I didn't want that shift to happen until the window was quite narrow. For example, the row of images near the footer maintains a horizontal layout until the window is quite narrow, and then the layout shifts to a couple of rows, and finally to completely vertical orientation.

In the masthead, I would like to maintain a horizontal layout of the two images until a narrower window size is reached, then shift to vertical. The first solution does accomplish that, but the window width threshold for shifting to vertical is only slightly narrower than the status quo. If the shift to vertical layout could happen at an even narrower window width, that would fulfill this question.

I agree it's generally unnecessary to use an image for text. I'm just a little compulsive about wanting to preserve the appearance of Lucida Calligraphy Bold font across browsers, and that doesn't happen very well without "solidifying" the appearance in an image.

Scott Fell

Media queries are what you want.

@media only screen and (min-width: 0px) and (max-width: 700px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}


@media only screen and (min-width: 701px) and (max-width: 900px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}

@media only screen and (min-width: 901px) {
   .className img {width:00px;}
   .className2 img {width:00px;}
}

Open in new window

The older iphone is 340px wide and about the narrowest you need to worry about. The sample above is to resize. But you can also use background images as well and swap out for images that are 100% size.

SuperiorWalrus

>>Now we need support for IE as it does not understand the max-width
>
>what? Please see http://caniuse.com/minmaxwh

Sorry, i must make it clear which versions of IE i am referencing.

ddantes

ASKER

Thank you. I'll need a little explanation of your code before I can implement it. Am I serving three different images to different devices? What actual widths belong in the image styling?

Scott Fell

The only one you versions you are referencing is going to be old.

fyi, as of last November, even google has dropped support for ie9 http://googlesystem.blogspot.com/2013/11/google-drops-support-for-ie9.html

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ddantes

ASKER

Thank you both!