How can I move and resize the text without resizng the parent div?

https://codepen.io/gtrman97/pen/ZEBgqeY

I want to be able to move and resize the text inside of the <div id="current-temp">, but when I try it changes the size of the white parent div container. I want the white parent div container to be a fixed size. I also tried putting a <p> element inside that div and putting the text in there but it did the same thing.

Hi Andrew. Elements will try to adjust to the size of their content, unless you specify what size those elements should be. So if you have a text inside a div element, the div will adjust its size according to the text size. To avoid that, you must specify the size of the div, obviously it should be larger than the largest expected size of the text.
I did not look into your project, but those basics should be enough for you to figure out where to issue is

You should always have test inside appropriate tags, either <h1 2 3 …n>s or <p>
And when you do that , preferrably go with classes instead of id’s : <h1 class="main__title"> title </h1>

<p class="main__title--text> lorem .... </p>

This is usualy abit cleaner and easier to style in css later using the classes with .class
Hope this helps.

But I thought classes are for multiple sections while id’s are for one specific section.

It looks like all I had to do was replace min-height with height.

Ill have to disagree, it is indeed strongly recommended to use the appropriate tags to wrap up text content, but its not a must and one should keep in mind they come with their predefined style properties(which need to be adjusted further). Also while class has its convenience to be used over id, even while addressing single component, i wouldnt overlook the use of ID’s, when it sticks to its core use.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.