Jump to content

Images are not responsive correctly


newcoder1010

Recommended Posts

Hello,

 

I have used the below code for responsive images. Slideshow takes the full width of the screen. I have visited different browsers. First image in the slideshow is giving me hard time. It stretches out and make the first image look really bad in different browsers.

 

If you please visit my page and help me to fix the issue for the first image. My link webuyhousesinnova.com. I like my images to be 700px height in the slideshow. I created each image with the same height(700px) first manually and then uploaded the images. Last 2 images are ok but the first one stretches bad...

 .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide {

    height: 700px !important;    min-height: 700px;     width: 100% !important;

}
.view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img {    height: 700px;
    min-height: 700px;
    width: 100%; margin-top: 50px;
    margin-left: auto;
    margin-right: auto;margin:0px;
    }

 

 

Link to comment
Share on other sites

I just removed 100% and images are not full width of the screen. I guess I am confused here. How can I make the images full width of the screen by keeping the same height? or I should not use height?

 

If I keep 100% width but no height, images are better but heights are not same for all images.

If I dont have any width plus fixed height, images are not full width of the screen but the same height for all.

 

Please advise.

Edited by newcoder1010
Link to comment
Share on other sites

Remove this line:

height: 700px !important;

It's forcing the image to be 700px tall no matter what the width is.

 

Also, setting min-height to 700px and width to 100% will probably force some of the flatter images to distort in order to meet your requirements. What you should do is open all these images in an image editor and crop them all to be the exactly same size.

Link to comment
Share on other sites

First I opened each image in paint and resized the image to 1350x550.

Modified my code as below.

Is this what you are asking?

 .view-slideshowv .views-slideshow-cycle-main-frame.views_slideshow_cycle_teaser_section, .views-slideshow-cycle-main-frame-row.views_slideshow_cycle_slide.views_slideshow_slide {
    width: 100% !important; min-height: 550px;

}
.view-slideshowv .views-slideshow-cycle-main-frame-row-item .field-content img {    
 margin-top: 50px;min-height: 550px;
    margin-left: auto;
    margin-right: auto;margin:0px; width: 100% !important;
    }
Link to comment
Share on other sites

That's correct. When I had min height, it is overlapping on the next region. I removed min height, it is not overlapping. When i resize the screen on desktop, Page is not being refreshed/responsive automatically. Is there any reason for that?

 

Overall, images look better. If I can do anything more to improve, please let me know.

 

Thanks much.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...