0

Transition and Text Movement

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

28th Oct 2017, 11:02 PM
Zeke Williams
Zeke Williams - avatar
2 ответов
+ 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.
29th Oct 2017, 12:21 AM
ChaoticDawg
ChaoticDawg - avatar
+ 1
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!
29th Oct 2017, 4:03 PM
Zeke Williams
Zeke Williams - avatar