Keeping photos next to eachother when scaling down to mobile

  • Unknown's avatar
    arbsdesign · Member ·

    Hi,

    i have 4 images/icons on my home screen and i need help with locking them next to eachother when the site is scaled down to tablet/mobile. at the minute they go under eachother into a row which makes the user scroll 1 at a time just to see each of the icons. i basically want the row of 4 images to stay as a row and scale down in size rather than alter the order

    thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this can be done, but the first thing that comes to mind after looking at your main page is that the images would be very tiny if side-by-side on smaller phones like an iPhone 4 or 5 in portrait orientation. Since you have included text in the images, that means the text would get very small and probably difficult to read.

    What you would need to do would be to have a parent div and then within that div, four other divs with an image in each. I’m sort doing the following “on the fly”, so adjustments would probably need to be made. What you may want to do is to do this in a draft page so that you can work on it and make the adjustments before going live with the change (copy/paste into your home page).

    This would be the basic HTML structure you would need to create in the Text tab on the draft page. 

    <div class="icon-container">
<div class="my-icon">first image code here</div>
<div class="my-icon">second image code here</div>
<div class="my-icon">third image code here</div>
<div class="my-icon">fourth image code here</div>
</div>

    This is a rough idea on the required CSS. 

    .icon-container {
    width: 100%;
}
.my-icon {
width: 24%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

    If you wish to do this and then report back and let me know the name of your draft page and what problems you are having, I’ll be more than happy to help get things where you want them.

  • Unknown's avatar
    arbsdesign · Member ·

    Hi @thesacredpath

    thanks for the reply and help. i agree that these images would look small on a small mobile screen. Perhaps it would be better if when the site gets smaller, the photos go in 2 rows of 2. at the minute it goes to 4 rows of 1, and like you suggested, 1 row of 4 would make them too small. Is this option possible?

    Thanks

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’ve copied out your image code into a draft page on my test site with Gateway and I’m having problems getting this to work as it should. I just wanted to let you know I’m working on it though.

  • The topic ‘Keeping photos next to eachother when scaling down to mobile’ is closed to new replies.