Styling for responsive behaviour - html

Question

I'm sure this is baby stuff for many, but I'm afraid I just can't get it right. The more I tweak, the further away I get with the results. No need to describe the consequences of my efforts. Instead here is the desired effect as the viewport shrinks:
The lower image is NOT what I'm actually producing; it's what I'd like to happen. Instead I've got the elements doing everything but this, the most annoying being the text wrapping under the images.
If someone can point me toward the most efficient code for this, including media queries, I'm grateful.

Answer 1

I trust you're using #media queries in your CSS, so I'll assume this unless told otherwise.
One way you could look at it is this:
Set the display property to inline-block of the Items 2 & 3.
Then, set the width of items 2 & 3 to 50% when the viewport is at more than 600px (desktop/tablet) wide. This will make them sit side-by-side.
Note: you might need to use box-sizing: border-box; for this to work properly; depending if you're using borders or not.
Then, on your media query for less than 600px (for mobile), set Items 2 & 3's widths to 100% to fill the width of the screen.
This will make them cascade neatly underneath one another.
Furthermore, I would recommend looking at using Bootstrap as this makes responsive website coding a doddle.
Hope this helps!

Answer 2

I think that the eassier solution here is using media queries. I give you a bit of background, just in case you don't know what they are.
When you create a stylesheet, the styles created are applied to the elements you target using selectors, like class, ids, etc.
Media queriesallow you to set conditions to that CSS rules, for example, you can create rules depending on the screen size.
See this fiddle to check how it works.
.short {
width: 50%;
float: left
}
#media screen and (max-width: 500px) {
.short {
width: 100%;
float:none;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
The CSS is easy. The first thing is the class short, which applies always to the elements. Then you find the media query which says that the CSS rules that encloses are applied only when the width is under 500px.

Answer 3

I had a project on responsive webpage and I'm a new learner so it's all basics:
https://github.com/nirupaboricha/Responsive_Webpage
Let me know if it's helpful.