3

I want the text to shrink as the image shrinks. e.g. maintain the same ratio in size relative to the image. I've tried making the text disappear but it simply isn't what I want.

The CSS:

.header{
    padding: 0.16px 16px;
    position: relative;
    box-sizing: inherit;
    display: block;
    font-size: 15px;
    line-height: 1.5;
    text-size-adjust: 100%;
    content: "";
    display: table;
    clear: both;
    font-family: "Montserrat", sans-serif;
}
.top-left{
    padding: 24px 48px;
    margin-left: 16%;
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: inherit;
    display:block;
    font-size: 15px;
    line-height: 22.5px;
    text-size-adjust:100%;

}
.header-image{
    vertical-align:middle;
    border-style: none;
    box-sizing: border-box;
    width:65%;
    height:auto;
    margin:30px 250px;

}

@media screen and (max-width: 600px) {
    .header-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:65%;

    }
}

.new-arrivals{
    position: absolute;
    display:block;
    left: 0;
    top: 0;
    margin:10px 5px 10px 0;
    font-size: 4vw !important;
    color:black;
    padding: 50px 100px;
    font-weight: 400;
    line-height: 60px;
}

.shop-now{
    border:none;
    display:inline-block;
    padding:12px 24px;
    margin: 260px 50px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:white;
    background-color:black;
    text-align:center;
    white-space: nowrap;
    font-size: 18px
}

.shop-now:hover{
    background-color: #ccc;
    color: black;
    border-style: ridge;
    border-color: black;
    border-width: 1px;
}

.designs{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px !important;
    font-family: "Montserrat", sans-serif;
    margin: 150px 0;
    color:black;
    padding: 24px 100px;
    font-weight: 400;
}

The HTML:

<div class="header">
    <img class="header-image" src="img/jeans.jpg" alt="Jeans">
      <div class="top-left">
        <h1 class="new-arrivals">New arrivals</h1> 
        <p><h3 class="designs">Our new season collection is here</h3> </p>
        <p><a href=".products" class="shop-now">SHOP NOW</a></p>
      </div>
</div>
Orlandster
  • 4,706
  • 2
  • 30
  • 45
Sophia Taylor
  • 31
  • 2

5 Answers5

1

If you want the text to be responsive as the image, you need to set h1 element style in your CSS file. For example:

.new-arrivals {
  font-size:clamp(2em, 4vw, 4em); /* set min, ideal value, max */
}
Hello_World
  • 33
  • 5
0

I was trying to do the same thing for my portfolio. And I end up putting my text imbedded inside the image by using the ms paints. The text inside image can't be responsive if it's not of part of image. I hope that help.

Kamran qureshi
  • 9
  • 5
0

You can accomplish this by setting both the width of the image and the font-size based on the width of the screen. Below is an example of that.

This question is similar, and the answers there may be helpful to you as well.

body {
  margin: 0;
}

.container {
  position: relative;
  color: white;
  width: fit-content;
}

.top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 3vw;
}

img {
  width: 100vw;
}
<div class="container">
  <img src="https://html.com/wp-content/uploads/flamingo.jpg">
  <div class="top-left">
    <h1 class="new-arrivals">New arrivals</h1>
    <h3 class="designs">Our new season collection is here</h3>
    <p><a href=".products" class="shop-now">SHOP NOW</a></p>
  </div>
</div>

If you don't need the image to scale with the screen width, you can simply set a fixed pixel size for both the image and the text.

Andrew Hulterstrom
  • 1,563
  • 4
  • 18
0

CSS for the Text:

.text {
font-size: 15vw;
}

CSS for the Image

img {
width: 10vw;
max-width: /* Set this to 10-15cm if you want to show you page on 
mobiles too */
min-width: /* Set this to 8-10cm if you want to show you page on 
mobiles too */
}
0

try these and adjust

font-size: clamp(1rem, 3vw, 2rem)
font-size: max(1rem, 3vw)
font-size: calc(200% + 2vw)
codmitu
  • 636
  • 7
  • 9