Solved

Styling of Masthead

Posted on 2014-04-03
10
251 Views
Last Modified: 2014-04-03
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.cssglobal-css.css
0
Comment
Question by:ddantes
  • 5
  • 3
  • 2
10 Comments
 
LVL 3

Assisted Solution

by:Conner Turner
Conner Turner earned 200 total points
ID: 39975695
Hello ddantes,

It sounds like you want to include responsive images?

Try and include a max-width property on the image this can be achieved in css:

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

Open in new window


Now we need support for IE as it does not understand the max-width attribute this would be achieved by using an HTML if within the <head> of you code:

<!--[if IE]>
	<style>.ie-support {width:100%;}</style>
<![endif]-->

Open in new window


Now this may all be well however adaptive images do not play nicely with just a single attribute , you will have to limit the container that the image is wrapped into with the same property so make sure to include the same code as a wrapper

Lastly you may want to keep the images inline whilst the browser is being positioned or within a narrow content window you can add a row wrapper:
.row {
  margin-left: -15px;
  margin-right: -15px;
}

Open in new window


Here is all the code put together:

CSS:
.img-responsive {
     max-width: 100%;
}
.img-wrapper {
    max-width: 100%;
    width: 100%;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}

Open in new window


HTML:
<div class="row">
    <div class="img-wrapper">
        <img src="myimage.jpg" class="img-responsive" alt="My Image">
    </div>
</div>

Open in new window


I hope that i have understood your question, if you need anymore help or this solution does not work for you then please just ask!

HTH,
Conner
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39975734
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39975747
>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....
0
 

Author Comment

by:ddantes
ID: 39975861
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39975889
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 3

Expert Comment

by:Conner Turner
ID: 39975968
>>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.
0
 

Author Comment

by:ddantes
ID: 39975987
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?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39975996
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
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 300 total points
ID: 39976020
You will have to plan out what sizes to use.  As much as you can, you want to use your images full size.  If you only have a 340px space for your image, then don't serve a 600px wide image and shrink it in the browser.  Although that is not as bad as the other way around.  If you have a 300px wide image and force it to expand to 600px, the text will look blown out.

When you are making a responsive site, you have to do a bit more planning.

Let's take 700 to 900px viewport.  The left side takes up about 65% of the total width.  That's about 450 to 580px of space.  For the larger screen, you may want to go bigger.  For the smaller screen, keep the same width, but stack the left over the right.  This will prevent the two from shrinking to the point they can not be read.
0
 

Author Comment

by:ddantes
ID: 39976059
Thank you both!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now