Tips for 2 Important Responsive Design Issue

Published on : July 9, 2014

Author: wahid

Category: Responsive

1. Showing proper image content & preventing image distortion
Suppose you have a large banner with main image content stays in one corner and the main image portion must appear while the page is being rendered on mobile devices. In this situation we need to crop off the image for mobile devices

Our example image in regular view:

large banner needs to be cropped off

To achieve the result if you re size the image there is a chance it will be stretched out in mobile window. That’s why some css tricks are required to get the image cropped off.

Here is the HTML code to use


<div class="header">
   <img src="image.jpg" alt="Image cropped from right" title="image">
</div>

And this is the CSS for cropping the image from right corner


.header{
   width:100%;
   float:left;
   position:relative;
   height:auto;
   overflow: hidden;
}
.header img{
   width:100%;
   height:auto;
}

This css being used your image will be scaled from the right in mobile window.

But the main portion gets cropped off which needs a fix. In this image the human face is the main portion which is in the right corner. So we need to crop this image from left. To crop the image from left get the following css added


.from_left{
   position:relative;
   float:right;
}

HTML code


<div class="header">
   <img class="from_left" src="image.jpg" alt="image" title="image">
</div>

Now the image is cropped from left as below

2. Add style to capital letter starting a sentence

Notice above the red marked portion. You can do this using the following CSS.

HTML code to use


<div class="block-body">
  <p><span>I</span>n the 1970s, when the effects of antibiotic overuse first began to emerge, the discovery of     novel classes of antibiotics slowed. While scientific research continued to explore how humans could stay ahead of bacteria, interest from drug companies dwindled because antibiotics, like all other drugs, are expensive to develop. </p>
</div>

CSS to use


.block-body p span{
   float: left;
   font-family: Times New Roman;
   font-size: 55px;
   font-weight: bold;
   line-height: 38px;
   padding-left: 0;
   padding-right: 6px;
   padding-top: 4px;
}