Photoshop Question posted in
The official user guide can be found here.

How to stop text from moving away from position when resizing? – Photoshop

I’m fairly new to coding, have been at it for a few hours for a month now. For the past few hours I’ve been stuck with the problem that can be seen in the two pictures I attached. I’ve tried searching for answers and various methods such as min-width, display:flex, adjusting the font-size from autoscaling with vw and using rem. I just want my text to stay inside of the laptop screen no matter what screen size I’m viewing it on. I know I could use the easy way and just photoshop the photo with the text but I want to learn how to do it with coding for future projects as well. I do want the picture to scale a bit so it can be viewed on for example a phone in an ok size. Can you help me please?

body {
  margin: 0;
  text-align: center;
}

h1 {
  color: #66BFBF;
  font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5vw;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-container {
  background-color: #ccf2f4;
  padding-top: 50px;
  position: relative;
}

.laptop {
  width: 50%;
  height: 50%;
}
<section>
  <div class="top-container">
    <img class="laptop" src="img/laptop.png" alt="cloud-img">
    <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
    <h1>I'm Nhien</h1>
    <h2 class="dreamer">just a gamer with big dreams.</h2>
  </div>
</section>

Full sized

Resized

The laptop image that I'm using

You can also access the website from www.nhienweb.com

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I applied this code to the CSS so it is working now. Don't think that this is the correct way to solve the problem but it seems fine when I tested my website on my mobile. Thanks for your trouble and time!

    @media (max-width: 591px){
    h1{
        top:30%;
    }
}


  2. 0

    You should add the image to the background of the section or the div.

    For this answer, I am adding it to the section background.

    <section>
  <div class="top-container">
    <img class="top-cloud" src="img/cloud.png" alt="cloud-img">
    <h1>I'm Nhien</h1>
    <h2 class="dreamer">just a gamer with big dreams.</h2>
  </div>
</section>

    In the HTML, I have removed the laptop img from html and will add it in the css. I will position the cloud as absolute.

    And here is the css for this code

    body {
  margin: 0;
  text-align: center;
}

h1 {
  color: #66BFBF;
  font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5vw;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-container {
  background-color: #ccf2f4;
  padding-top: 50px;
  position: relative;
}

.top-cloud {
    position: absolute;
    top: 0;
    left: 0;
/* Positioned it relative to the top-container */
}

section {
    background-image: url([your path to img relative to the css file]);
    background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}

    If this doesn’t help comment and ask me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search