Transition and Text Movement

Question

Is there a trick I can use so that when the menu on the right slides out, the text isn't squeezed and pulled during the transition. I want the menu's width to be 70% so it works with all screen sizes, and I know setting the text div's width to a constant pixel size will fix it, but then it might be too big for mobile screens. Do I have to use a media query to set the width then, or is there a trick? Thanks for all responses. Happy coding :)

https://code.sololearn.com/W40L88Et0Glv

Answer 1

in your css you can give #content a fixed height such as 100px and add overflow:hidden

#content {
...
height: 100px;
overflow: hidden;
}

Then you can either add a fixed width to the #content as well, or better yet wrap the text in the #content div in a <p></p> tag and add some css for the text, including giving it a fixed width.

#content p {
padding: 0;
margin: 0;
overflow: hidden;
width: 400px;
}

You may need to play with the values to get the results you want and also may need to a @media breaks for various screen sizes.

Another option would be not to transition the width, but rather the x position of the #thing/#content div(s), starting with a negative x position to move the entire div off the left of the screen.

Answer 2

Ah okay. I hadn't even thought of the x position. I will try that out at least. I think I'm going to try hiding the text by setting the background color to the text color and then change it when the menu slide transition is finished. But I'll need to figure out some things to get that to work. Thanks for the response @ChaoticDawg!