Background About Page Mobile Screen Size

SebastianIbold · May 30, 2022

I have an issue with my mobile phone screen sizes version of my about page (https://www.sebastianibold.com/About-Sebastian-Ibold-Photographer).

I want this picture (https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg) to appear on the mobile screen size version. I use below CSS on the theme to do that.

The problem is that it is still somehow overlaid by the background picture on the about page (which I want to keep for desktop monitor size). If I remove the background pic, the CSS works fine on the mobile screen version showing the image. If would appreciate direct guidance on why the CSS is conflicting with the background picture.

@media only screen
and (min-width : 320px)
and (max-width : 480px) {
html.sm-user-ui {
background-image: url(https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg);
background-repeat: repeat;
}
}

I would appreciate if anyone could suggest what to do about it!

BR,
Sebastian

Hikin' Mike · May 30, 2022

Smugmug's mobile breakpoint is 736px or smaller, so you need to change your code:

@media (max-width: 736px) {

  html.sm-user-ui {
    background-image: url(https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg);
    background-repeat: repeat;
  }

}

SebastianIbold · May 30, 2022

Thanks Hikin' Mike!

I changed to code but unfortunately, the background image still appears on the mobile phone screen (https://www.sebastianibold.com/About-Sebastian-Ibold-Photographer). When opening the page, I can see the mobile screen background image for half a second before the background image appears and kind of overlays it.

SebastianIbold · May 30, 2022

> @"Hikin' Mike" said:
> Smugmug's mobile breakpoint is 736px or smaller, so you need to change your code:
>
> @media (max-width: 736px) { html.sm-user-ui { background-image: url(https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg); background-repeat: repeat; }}
Thanks Hikin' Mike!

I changed to code but unfortunately, the background image still appears on the mobile phone screen (https://www.sebastianibold.com/About-Sebastian-Ibold-Photographer). When opening the page, I can see the mobile screen background image for half a second before the background image appears and kind of overlays it.

Hikin' Mike · May 30, 2022

Try this:

@media (max-width: 736px) {

  html.sm-user-ui {
    background-image: url(https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg);
    background-repeat: repeat;
  }

  .sm-user-ui .sm-page-background .sm-tile-content .sm-image {
    display: none;
  }

}

SebastianIbold · May 30, 2022

> @"Hikin' Mike" said:
> Try this:
>
> @media (max-width: 736px) { html.sm-user-ui { background-image: url(https://photos.smugmug.com/Background-Pictures/i-L2xhVBS/0/79c459fc/M/Background%20Mobile-M.jpg); background-repeat: repeat; } .sm-user-ui .sm-page-background .sm-tile-content .sm-image { display: none; }}

Thank you so much "Hikin' Mike"! That works perfectly! The only issue left is that the text on different desktop screen resolutions and on the Ipad appears not as I want it. On the Ipad it is appears extremely long vertical and narrow horizontal and on the desktop monitor (1920*1080) is shows wrong in position and the font appears very small (on my 3840*2160 resolution screen it looks correct).

Thanks again for the quick and great support and BR,
Sebastian

Hikin' Mike · May 30, 2022

@SebastianIbold said:
The only issue left is that the text on different desktop screen resolutions and on the Ipad appears not as I want it. On the Ipad it is appears extremely long vertical and narrow horizontal and on the desktop monitor (19201080) is shows wrong in position and the font appears very small (on my 38402160 resolution screen it looks correct).

Thanks again for the quick and great support and BR,
Sebastian

I prefer using HTML/CSS Blocks instead of Text Blocks. If you want to center your text, remove your Text Block and use a HTML/CSS block:

HTML

<div class="container">

  <div class="content">

    <h2>Sebastian Ibold</h2>

    <p>I was born in Berlin, Germany in 1983 and grew up there. After studying urban planning, I moved to China, where I have been living and working for more than 10 years.</p>

    <p>On my travels through China and other Asian countries I have captured impressions of this region of the world with my camera. In my photography I focus on scenes from the everyday life of people in the cities and in the countryside.</p>

    <p>It gives me great pleasure to share my impressions with you and I hope you enjoy them too.</p>

    <p>My mailbox is always open for you!</p>

  </div>

</div>

CSS

h2 {
  font-size: 3em;
}

p {
  font-size: 1.25em;
}

.container {
  height: 100vh;
  width: 50%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
}

You can change the font size as I use em, but if you want to use px, that's fine too.

SebastianIbold · May 30, 2022

> @"Hikin' Mike" said:
> I prefer using HTML/CSS Blocks instead of Text Blocks. If you want to center your text, remove your Text Block and use a HTML/CSS block:
>
> HTML
>
> <div class="container"> <div class="content"> <h2>Sebastian Ibold</h2> <p>I was born in Berlin, Germany in 1983 and grew up there. After studying urban planning, I moved to China, where I have been living and working for more than 10 years.</p> <p>On my travels through China and other Asian countries I have captured impressions of this region of the world with my camera. In my photography I focus on scenes from the everyday life of people in the cities and in the countryside.</p> <p>It gives me great pleasure to share my impressions with you and I hope you enjoy them too.</p> <p>My mailbox is always open for you!</p> </div></div>
>
> CSS
>
> h2 { font-size: 3em;}p { font-size: 1.25em;}.container { height: 100vh; width: 50%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;}
>
> You can change the font size as I use em, but if you want to use px, that's fine too.

Thanks Hikin' Mike!

I added the HTML/CSS Block which works very well. Unfortunately, I do not manage to get the text on different screen resolutions look as I want it (within the darker background picture part right next to the profile pic and with a proper text formatting). On the phone, the text is extremely narrow and stretched vertically now, no idea why.

I would appreciate if you have any suggestion on how to fine tune this for different screen sizes.

Thanks and with kind regards,
Sebastian

Hikin' Mike · May 30, 2022

@SebastianIbold said:
I added the HTML/CSS Block which works very well. Unfortunately, I do not manage to get the text on different screen resolutions look as I want it (within the darker background picture part right next to the profile pic and with a proper text formatting). On the phone, the text is extremely narrow and stretched vertically now, no idea why.

I would appreciate if you have any suggestion on how to fine tune this for different screen sizes.

Thanks and with kind regards,
Sebastian

Since I didn't know what your page is supposed to look like, I guessed. Give this a try. I changed the width from 50% to a fixed width. I also switched the text from the center to more to the bottom.

h2 {
  font-size: 3em;
}

p {
  font-size: 1.25em;
}

.container {
  height: 90vh;
  width: 450px;
  margin: auto;
  display: flex;
}

.container .content {
  padding: 0 1em;
  align-self: flex-end;
}

SebastianIbold · May 31, 2022

@Hikin' Mike said:

@SebastianIbold said:
I added the HTML/CSS Block which works very well. Unfortunately, I do not manage to get the text on different screen resolutions look as I want it (within the darker background picture part right next to the profile pic and with a proper text formatting). On the phone, the text is extremely narrow and stretched vertically now, no idea why.

I would appreciate if you have any suggestion on how to fine tune this for different screen sizes.

Thanks and with kind regards,
Sebastian

Since I didn't know what your page is supposed to look like, I guessed. Give this a try. I changed the width from 50% to a fixed width. I also switched the text from the center to more to the bottom.
h2 {
  font-size: 3em;
}

p {
  font-size: 1.25em;
}

.container {
  height: 90vh;
  width: 450px;
  margin: auto;
  display: flex;
}

.container .content {
  padding: 0 1em;
  align-self: flex-end;
}

Dear Hikin' Mike,

Thanks a lot! I tried it but still on different screens it looks different.
My goal is to make the page look like the landscape-oriented pic attached on landscape screens and like the vertical-oriented pic on vertical IPad and smartphone screens.

Thanks for your great support!

With kind regards,
Sebastian

SebastianIbold · June 2, 2022

Dear @Hikin' Mike ,

I gave up on the dark background stripe where the text shall be centered in on all screen sizes as this seems difficult.
Last thing I still need to do is to ensure that the text appears on all screen sizes and horizontally and vertically more or less right next to the profile picture. Currently the position varies a lot on different screen sizes).

I would be very happy if you could help in fixing this.

Thanks and with kind regards,
Sebastian

Hikin' Mike · June 2, 2022

The only way I can see you doing this is using an image block for you and a text block or HTML/CSS block. Using a background and having text where you want it is going to be nearly impossible, at least for me.

Background About Page Mobile Screen Size

Comments