Web Development

Question

How can I set the width of all of the components in the above code so that they stay on the same row irrespective of the device the code has been accessed on?

https://code.sololearn.com/WUWxxbPO3rN3/?ref=app

Answer 1

 Just add <meta name="viewport"content="width=device-width, initial-scale=1.0">
in the head section.

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport"content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

It's working now
https://code.sololearn.com/WHcmmYaCqfr4/?ref=app

Answer 2

Samrat I am not good at html and css and jQuery
Where changing the width from 100% to 100px didn't have any effects.

Try it yourself to change the width to px to observe the changes that you have found

Answer 3

Sean Discord*. Yes!

Answer 4

Samrat Because in CSS you have setted textarea width 50% to parent while iframe not (and in your case default its 100% like parent)

Answer 5

Samrat On your last question: In HTML/CSS its important to work very clean to minimize any display errors. It‘s (always) a real mistake behind everything what isnt like it should to be.

First: Its good if you use box-sizing: border-box for the divs. The border-box means that the box automatically will fit into the outer-div. Normally padding, margin and border will addet to the size of the div and in case of two 50% divs in one 100% divs, a border of the 50% div will addet to a for example 50% + 1px width. So its not fitting any more correctly in the 100% div. Also its important that you insert display: block to the divs and float: left or right, that they are correctly positionated.

Second: To find the problem you can always add a background-color to the divs to see what div isnt correctly. If you see this you will know where you have to correct the code. In your case I think already the outer-div #bodyContainer has not the 100% width of the page. I could have a look later if you need help.

Much regards
Sean

Answer 6

Vishal Pal❄️⚛️ thanks a lot!

One question, why is the width of the iframe more than the text area?

Answer 7

Samrat Do you have the Discort App for Sololearn?

Answer 8

Go on google and search TTF technical tech friend and open my youtube channel
and solve our problems