Help with <div>scaling for tablet and mobile phones

dualcoast

Hi I have FINALLY published my new SM site. It is still a work in progress but I am happy with the way it is looking on my monitor.

My problem is I used a <div> to create clickable images on the homepage and again on the portrait page that link to other pages that I created. When viewed on a small screen like a tablet or phone the images scrunch up and over lap each other.

I would rather they align vertically on the small screen or just show alt tags or just one image. I am not brilliant with html or CSS so if there is a better way to accomplish something similar to what I have please let me know.

Also any other feedback on the site is appreciated. Thank You!

dualcoast

oops www.tracyshubin.com is the link.

Hikin' Mike

Try this:

You'll have to change the url, picture, and alt tags though.

HTML:
[html]
<div class="image-wrap">
<div class="image">
<a href="link-to-gallery-here"><img src="url-of-picture-here.jpg" alt="Text Here" /></a>
<a href="link-to-gallery-here" class="caption">Text Here</a>
</div>
<div class="image">
<a href="link-to-gallery-here"><img src="url-of-picture-here.jpg" alt="Text Here" /></a>
<a href="link-to-gallery-here" class="caption">Text Here</a>
</div>
<div class="image">
<a href="link-to-gallery-here"><img src="url-of-picture-here.jpg" alt="Text Here" /></a>
<a href="link-to-gallery-here" class="caption">Text Here</a>
</div>
<div class="image">
<a href="link-to-gallery-here"><img src="url-of-picture-here.jpg" alt="Text Here" /></a>
<a href="link-to-gallery-here" class="caption">Text Here</a>
</div>
</div>
[/html]

CSS:

    /* Image Wrap */
.image-wrap {
    text-align: center;
    }

    /* Image Container */
.image {
    width: 23%;
    display: inline-block;
    float: left;    
    }
    
.image:nth-child(1) {
  float: left;
}

.image:nth-child(2),
.image:nth-child(3) {
  margin: 0 1%;
  float:none;
}

.image:nth-child(4) {
  float: right;
}    

    /* Image */
.image img {
    max-width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    /* Captions */
.image-wrap .caption:nth-child(1),
.image-wrap .caption:nth-child(2),
.image-wrap .caption:nth-child(3) {
    position: relative;
    float: left;
    margin-top: -20%;
    text-align: left;
    width: 96%;
    }    
.image-wrap .caption {
    padding: 1% 0 1% 3%;
    color: #fff;
    text-shadow: #000 .1em .1em .2em;
    background: rgba(0, 0, 0, 0.5);
    }
.image-wrap:hover .caption {
    background: rgba(0, 0, 0, 0.8);
    }

Hikin' Mike

I saw that on my 1024 x 768 monitor too, so it isn't just for tablets.

dualcoast

Thank you so much for you help Mike!

That code gets it going in the right direction. It scales well on my laptop monitor when I reduce the browser size but on my iphone the photos get stretched long and thin. ???

Also I would like to try to
1. center the whole div block,
2. adjust the hover so that only one image reacts at a time
3. is there a way to shave off the ends of the caption stripe so it is not wider than the images?

Hikin' Mike

Sorry about the hover. I didn't see it originally. Just replace the old CSS with this:

    /* Image Wrap */
.image-wrap {
    text-align: center;
    }

    /* Image Container */
.image {
    width: 23%;
    display: inline-block;
    float: left;    
    }
    
.image:nth-child(1) {
    float: left;
    }

.image:nth-child(2),
.image:nth-child(3) {
    margin: 0 1%;
    float:none;
    }

.image:nth-child(4) {
    float: right;
    }    

    /* Image */
.image img {
    max-width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    /* Captions */
.image-wrap .caption:nth-child(1), 
.image-wrap .caption:nth-child(2), 
.image-wrap .caption:nth-child(3), 
.image-wrap .caption:nth-child(4){
    position: relative;
    float: left;
    margin-top: -20%;
    text-align: left;
    width: 96%;
    }    
.image .caption {
    padding: 1% 0 1% 3%;
    color: #fff;
    text-shadow: #000 .1em .1em .2em;
    background: rgba(0, 0, 0, 0.5);
    }        
.image:hover .caption:nth-child(1), 
.image:hover .caption:nth-child(2), 
.image:hover .caption:nth-child(3), 
.image:hover .caption:nth-child(4) {
    background: rgba(0, 0, 0, 0.8);
    }
    
@media only screen and (max-width: 799px) {
    .image,
    .image:nth-child(1),
    .image:nth-child(2),
    .image:nth-child(3),
    .image:nth-child(4) {
            width:100%;
            clear:both;
            margin:0 auto;
        }
}    

Looking it my testing site, the 4 images are centered.

Hikin' Mike

You have a 200px margin-left here:

.sm-page-widget-5374539 .sm-page-widget-content {
    margin-left: 200px;


}

dualcoast

Thank you. My bad on the margin, I forgot I had that in there. So if I give the page a fixed width instead of stretchy to bring the images closer together and avoid the caption bars spreading out beyond the images, will it still scale down?

Hikin' Mike

dualcoast wrote: »

Thank you so much for you help Mike!

That code gets it going in the right direction. It scales well on my laptop monitor when I reduce the browser size but on my iphone the photos get stretched long and thin. ???

Also I would like to try to
1. center the whole div block,
2. adjust the hover so that only one image reacts at a time
3. is there a way to shave off the ends of the caption stripe so it is not wider than the images?

It isn't doing that on my test-page, but I do see it on your site. Change 'max-width' to 'width' here in red:

    /* Image */
.image img {
    [COLOR=Red]max-width[/COLOR]: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

Hikin' Mike

dualcoast wrote: »

Thank you. My bad on the margin, I forgot I had that in there. So if I give the page a fixed width instead of stretchy to bring the images closer together and avoid the caption bars spreading out beyond the images, will it still scale down?

In my custom-template, my site uses a fixed-width. That's why it works on my site, and not yours. Change the 'max-width' should take care of that.

dualcoast

Thank you Mike. I made mine fixed and everything woks perfectly...as far as I know, so far. thanks!