Having some problem in my responsive image gallery

user_10814152 0
Viewed 268

I have made a site www.carwahi.com using my own HTML & CSS coding but somehow I can't be able to fix the image gallery on my page when viewing in mobile. In mobile view, the images appears to be half the original picture covering half the page.

I am providing my code below although I can't be able to ft in the whole coding in this query area.

I have put the image sizes in pixels in my html code. If you want to check just visit my site & resize the browser to see the problem.

<style>
@media screen and (max-width: 700px){
.column.middlehome img{max-width: 100%;}
.column.middlehome{max-width: 100%; padding-right: 0; margin-right: 0;}
.column.sidehome{width: 0%;}
.gallery2 img{max-width: 100%; padding-right: 0; margin-right: 0; padding-left: 8%; margin-left: 0;}
.gallery2{max-width: 100%; margin-right: 0%;}
.containerhero{max-width: 100%;}
}
</style>
css html
6 Answers

You need to set breakpoints in swiper js to view in mobile like below:
Breakpoints: Allows to set different parameter for different responsive breakpoints (screen sizes).

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            // when window width is <= 320px
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            },
            // when window width is <= 480px
            480: {
              slidesPerView: 1,
              spaceBetween: 20
            },
            // when window width is <= 640px
            640: {
              slidesPerView: 2,
              spaceBetween: 30
            }
        }

 });

Working Example here

user_63641900

I have done the changes using developer tool and i got the below output.enter image description here Kindly do some correction in your code :

  1. add a class for image tag under "Photo Gallery", Here i added class="banner".
  2. add style for banner in media query @media (min-width: 301px) and (max-width: 700px){.banner{width: 100%;height: auto;}
  3. change the style for column.middlehome and column.sidehome in @media (min-width: 301px) and (max-width: 700px)

.column.middlehome { width: 100%; margin-right: 0; padding: 10px 0; margin-left: 0; overflow: hidden; }

And for the column.sidehome change the width:100%

@media (max-width: 700px) and (min-width: 301px) .row1 img remove the left padding There is some space in left side of the (car and bike part) images.

user_35557750

Give your image in homecontent this CSS. Also Your column does not have width 50% and contains some padding. Seems like your sidehome and menu at the top is also not being displayed on mobile view too. This must do the work for you. :)

@media (max-width: 700px) and (min-width: 0px){
 .homecontent img {
   width: 100%;
   padding: 0;
   object-fit: cover;
 }
.column.middlehome {
  width: 50%;
  margin-right: 0%;
  margin-left: 0.5%;
  padding: 10px 0;
  overflow: hidden;
 }
.column.sidehome {
  width: 46%;
  display: block;
  padding-top: 10px;
 }
}
user_100031960

I think you are talking about this Photo Gallery Page. The problem is occuring for the fixed height and width you gave.

<img src="http://www.carwahi.com/Cars Images/Nissan-Kicks-4.jpg" width="1100" height="700">

replace the code to following:

<img src="http://www.carwahi.com/Cars Images/Nissan-Kicks-4.jpg" width="85%" height="auto">

Here instead of 85% you can give your preferred width. Hope it helps.

/* --- New Added Styles --- */
@media (max-width: 700px) and (min-width: 301px) {
    .column.sidehome {
        width: 100%;
        display: block;
        padding-top: 10px;
    }
    .column.middlehome {
        width: 100%;
        margin-right: 0%;
        padding: 10px 0;
        margin-left: 0.5%;
        overflow: hidden;
    }
    .flipcontainer1 {
        position: relative;
        width: 100%;
        height: 415px;
    }
    .row1 img {
        width: 100%;
        height: auto;
        padding-right: 0;
        margin-right: 0;
        padding-left: 0;
        margin-left: 0;
    }
    div.gallery2 {
        margin: 20px auto;
        width: 100%;
        height: auto;
        /* float: left; */
        overflow: hidden;
    }
}
user_84768300

slider is not responsive on larger screens as well

see if this works

.homeback{
    width : 100%;
}
user_39172380

@Partho63, the error is occurring in the "Harley" image & its content just like you can see it in my image. The "Harley" area comes under .column.sidehome & the description comes under .containerhero1.

***Error occurring in lining up the "Harley" Image & its description.***

user_108141520
Related