Agfdhyk

I've asked this a couple times but seems like I didn't word it quite right so will try do better here,

I'm trying to make a 2 column layout in HTML, CSS, & Java, what I want is the text on the left to center in the middle of both columns once the resolution is too low (by this I mean the columns look great in 1920x width and 1600x width, but when it gets down to 1200x800 the text breaks past the height of the right image).

I've seen a website that once the page width hits a certain point (around 1200x width) the text in the left column snaps to center in the middle of both, which results in the page looking good at all res. I have a feeling the text is overlayed on top of both columns with a java snippet that tells the text to move into the center at a certain width, only problem is I don't know how to achieve that,

I've attached my code at the bottom but in my version the text is inside the left column, am I right thinking that the text is probably on-top of both columns? and is there a javascript to tell the text to move center at a certain width? would really appreciate any help!

HTML:

<div class="content1">

<div class="column1 animation fadeInUp">

<div class="title1">

<h3>STATEMENT</h3> . 

<h2>Title of Some Sort.</h2>

<div class="blue-line"></div>

</div>

<p1>Paragraph text.<br></p1>

<button class="svg1">FORUM</button>

<button class="svg2">SIGN UP</button>

</div>

<div class="column2">

<div class="column2pic"></div>

</div>

</div>

CSS:

.content1 {

display: flex;

margin-left:100px;

margin-right:0px;

}



.column1 {

display:inline-block;

flex: 31%;

padding-bottom: 0px;

padding-right:50px;

opacity: 0; animation-play-state: paused;

}



.animated {

-webkit-animation-duration: 1.5s;

animation-duration: 1.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

animation-play-state: running;

}



.fadeInUp {

-webkit-animation-name: fadeInUp;

animation-name: fadeInUp;

}





@keyframes fadeInUp {

from {

opacity: 0;

-webkit-transform: translate3d(0, 2.5rem, 0);

transform: translate3d(0, 2.5rem, 0);

}



to {

opacity: 1;

-webkit-transform: none;

transform: none;

}



.column2 {

flex: 50%;

padding-bottom: 0px;

padding-left:100px;

padding-top:0px;

width:50vw;

}



.column2pic {

background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 

0.0)), url(../Assets/Images/Content1pic);

background-size:cover;

z-index: 100;

width:50vw;

height:600px;

}

NOTE: the animation is just a simple effect for the left text to fade up, but don't mind if anyone excludes that part to keep it simple.

Let me know if you have any ideas! Thanks!

You will need to use css @media. In your case, you will have to create @media only screen and (max-width: 1200px) with the style that you would like at this size. See below an example of it. I put the width to 400px to fit with this snippet. When you resize the browser window under 400px @media only screen and (max-width: 400px), it lowers the text size font-size: 20px; and align it in the center text-align: center;.

#mypic {

  width: 100%;

  max-width: 560px;

  height: 350px;

  background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350");

  font-size: 50px;

}



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

    #mypic {

      font-size: 20px;

      text-align: center;

    }

}

<div id="mypic">My Title In Picture!</div>