Forcing a Single Photo in Sidebar to Resize with Browser Window Size

viktor35mm

Hi all,

Newbie here referred over from Smugmug support. Looking for an assist with my homepage @ www.viktor35mm.com.

Basically looking to have a photo on the left side of the page, with text and button + social on the right side as can be seen on my site.

To achieve this I had to use some workarounds as Smugmug doesn't seem to let me have two content blocks taking the up the same space as a single content block next to it.
I basically used both the left side-bar and the right side bar (maximised for size) and placed the photo in the left one, with the text/button and social on the right one.

Now this works great with a maximised browser window - however the second I decrease the size of the browser window, the photo from the left stays the same size and pulls over the text to the right.

I'm guessing this needs some kind of CSS workaround but as I'm not familiar with either HTML/CSS looking for help!

Hikin' Mike

I would use a single HTML/CSS block to design it. I know you don't have the knowledge, but if you tell me what exactly what the image and text are supposed to look like when the screen size gets smaller, I can help you.

Hikin' Mike

Using a HTML/CSS block, add this to the HTML section:

<div class="homepage">

  <div class="homepage__image"><img src="https://photos.smugmug.com/2019/KL-Randoms/n-RNrKGN/i-c4HqdWm/0/a0303d5d/X4/i-c4HqdWm-X4.jpg" alt="" /></div>

  <div class="homepage__wrap">

    <div class="homepage__content">
      <h1>VIKTOR.35MM</h1>
      <p>photographer</p>
      <button><a href="/Images">View Photos</a></button>
    </div>

    <div class="homepage__social"><a href="https://instagram.com/viktor35mm/"><span class="sm-fonticon sm-fonticon-large sm-fonticon-Instagram2"></span></a></div>

  </div>

</div>

Add this to the CSS section:

h1 {
  font-size: 20px;
  letter-spacing: .5em;
}

h1, p {padding: 0 0 1.5rem;}

.homepage,
.homepage__wrap,
.homepage__social {display: flex;}

.homepage__image img {
  max-width: 100%;
  width: auto;
}

.homepage__image,
.homepage__wrap {
  width: 50%;
  flex-direction: column;
}

.homepage__content {
  padding: 1.5rem;
  text-align: center;   
  margin: auto;
}

.homepage__content button {
  padding: 0;
  border: none;
  background: none;
  text-transform: uppercase;
}

.homepage__content button a {
  padding: 1rem 2rem;
  border: 2px solid;
  background: white;
}

.homepage__content button a:hover {
  background: rgba( 0, 0, 0, .1 );
}

.homepage__social {
  padding: 1.5rem;
  align-items: flex-end;
  justify-content: center;
}

@media only screen and ( max-width: 800px ){

  .homepage {display: inline;}

  .homepage__image,
  .homepage__wrap {width:100%;}

}

When the screen is less than 800px, it will put your content under your picture.

viktor35mm

You sir are absolutely amazing. Thank you!

There are only two issues remaining, 1: the button doesn't seem to work (I'll try playing around with the code) - and 2: there is a border around my image - is there a way to remove that and force the image to the edges? (I'll try looking around for this too).

Otherwise, thank you so so much!

Hikin' Mike

There is a 12px margin (Dimensions) around the HTML/CSS by default. Set it to 0px for all 4 edges. The link works for me, did you fix it?

viktor35mm

So I've removed all the borders, almost perfect. Now however I have a tiny gap from the bottom of the page below the image - it seems the HTML container is very slightly larger than the image - but as the image is 1:1 it should scale all the way right?
I tried having a separate container for the photo on the left and a container for HTML/CSS on the right (and removing the image code) but I then had scaling issues with the social button - so I guess that's a no go.

The button doesn't seem to work for me no. Can't figure out what's wrong with it.

Hikin' Mike

Not sure why your button doesn't work for you because it works for me. Clicking it goes here: https://www.viktor35mm.com/Images which has no images.

viktor35mm

Very strange.

So with that tweak the image seems to have filled the HTML/CSS block, however there is still a tiny gap below the image. I figured it might be the login button (i logged out to check how it looks) so I removed that but nope, it's still there.
I do have a CSS placeholder below everything (for removing 'powered by smugmug' and the login) - could that be having some kind of impact? I've tried moving it above and it made no difference so I guess not.

Perhaps it's the photo being 1:1?

I mean it's not the worst thing, but it's strange there's a forced scroll wheel for it.

As for the button, that's even stranger - there's simply no way to click it for me. Even on different browsers (logged out).

Hikin' Mike

Remove the height: 100%; as it doesn't work and it screws it up on Chrome.

What OS and browser are you using? Your button works using Win7 with Firefox and Chrome.

viktor35mm

Okay so the button problem is a non-issue. It's the outdated version of Firefox I'm using from a work PC (W7) (unable to update it, long story).

On my personal PC/laptop it works great on edge/firefox w10.

Have removed the height:100%.

I think I'll try using a different photo and see what happens - maybe the photo is too small?

Hikin' Mike

Not an issue with the image. I'm currently looking into it.

viktor35mm

> @"Hikin' Mike" said:
> Not an issue with the image. I'm currently looking into it.

Yup you're right. Made no difference no matter the size. Really appreciate your efforts.

Hikin' Mike

Think I found it. Add display: block; here:

.homepage__image img {
  max-width: 100%;
  width: auto;
  display: block;
}

viktor35mm

> @"Hikin' Mike" said:
> Think I found it. Add display: block; here:
>
> .homepage__image img { max-width: 100%; width: auto; display: block; }

I think that might have done the trick! There's still a scroll bar (with a mm or 2 of movement), but no annoying bottom white bar which is excellent.

I can't see it yet from other browsers (guess it needs to update) but I reckon it's all good.

Thank you.

Onto the rest of the site for me :)

Hikin' Mike

Pretty sure there was a scroll bar originally.

viktor35mm

> @"Hikin' Mike" said:
> Pretty sure there was a scroll bar originally.

Yes there was - is there a way to remove it?

Hikin' Mike

@viktor35mm said:
Yes there was - is there a way to remove it?

I think so, but if you want a 50% of the image and 50% of the "other stuff", something has to give (like cropping part of the image in CSS). May have to re-do some of the code. I'll take a look this evening/tomorrow. It's going to be similar to how the full-screen background works. Small screens will "crop" some of the image.

viktor35mm

> @"Hikin' Mike" said:
> @viktor35mm said:
> Yes there was - is there a way to remove it?
>
>
>
>
>
> I think so, but if you want a 50% of the image and 50% of the "other stuff", something has to give (like cropping part of the image in CSS). May have to re-do some of the code. I'll take a look this evening/tomorrow. It's going to be similar to how the full-screen background works. Small screens will "crop" some of the image.

-----------------------

Cropping of the image would be no problem when the screen/browser is smaller; if it just crops from the edges equally inward then no problem at all.


In the meantime I'll look into how to adjust fonts in CSS - I'd like something more like futura font for the tagline and perhaps that or something else for the headline.

Again, really appreciate your efforts!

Hikin' Mike

@viktor35mm said:
Cropping of the image would be no problem when the screen/browser is smaller; if it just crops from the edges equally inward then no problem at all.

Remove the <img src="https://photos.smugmug.com/2019/KL-Randoms/n-RNrKGN/i-c4HqdWm/0/a0303d5d/X4/i-c4HqdWm-X4.jpg" alt="" /> from your HTML section.

In your CSS section, remove this:

.homepage__image img {
  max-width: 100%;
  width: auto;
}

Use this instead:

.homepage__image {
  position: relative;
  min-height: 100vh;
  background: url('https://photos.smugmug.com/2019/KL-Randoms/n-RNrKGN/i-c4HqdWm/0/a0303d5d/X4/i-c4HqdWm-X4.jpg') no-repeat center;
}

@viktor35mm said:
Again, really appreciate your efforts!

You're welcome. I enjoy it and it gives me something to do.

Hikin' Mike

One more thing about mobiles. You might want to use a smaller image for mobiles (less than ~800px wide) to save bandwidth.

Find the media queries on the bottom of your CSS section:

@media only screen and ( max-width: 800px ){

  .homepage {display: inline;}

  .homepage__image,
  .homepage__wrap {width:100%;}

}

Use this instead:

@media only screen and ( max-width: 800px ){

  .homepage {display: inline;}

  .homepage__image,
  .homepage__wrap {width:100%;}

  .homepage__image {background: url('url-for-the-smaller-version-here') no-repeat center;}

}

You'll need to use the smaller version of your image in place of url-for-the-smaller-version-here.

viktor35mm

@Hikin' Mike said:

@viktor35mm said:
Cropping of the image would be no problem when the screen/browser is smaller; if it just crops from the edges equally inward then no problem at all.

Remove the <img src="https://photos.smugmug.com/2019/KL-Randoms/n-RNrKGN/i-c4HqdWm/0/a0303d5d/X4/i-c4HqdWm-X4.jpg" alt="" /> from your HTML section.

In your CSS section, remove this:

.homepage__image img {
  max-width: 100%;
  width: auto;
}

Use this instead:

.homepage__image {
  position: relative;
  min-height: 100vh;
  background: url('https://photos.smugmug.com/2019/KL-Randoms/n-RNrKGN/i-c4HqdWm/0/a0303d5d/X4/i-c4HqdWm-X4.jpg') no-repeat center;
}

---

You did it! Works beautifully!

The mobile part works well, though I need to resize a proper image when I get home as smugmugs internal resizing hits the quality a bit too much. There is one niggle though, is there a way to force a gap between the image (being at the top) and the title ''VIKTOR.35MM" for mobile only? As right now the title is glued to the base of the image.

Really really pleased with how it's come out - thanks to you I've learned a lot about how this all works .

Hikin' Mike

@viktor35mm said:
You did it! Works beautifully!

The mobile part works well, though I need to resize a proper image when I get home as smugmugs internal resizing hits the quality a bit too much. There is one niggle though, is there a way to force a gap between the image (being at the top) and the title ''VIKTOR.35MM" for mobile only? As right now the title is glued to the base of the image.

You removed the padding I had here:

.homepage__content {
  padding: 1.5rem;
  text-align: center;   
  margin: auto;
}