CSS Layout, title next to image


I have a codepen here - https://codepen.io/anon/pen/MZMpRa

I thought this would be simple but I’m having problems

I have an image, next it I have a title, links and a form input.

On smaller screens I want the links and form below the image but the title in the same place.

How can I create this layout so the title, links and form are next to the image and only the title is next to the image in smaller screens

What would be the purpose of keeping the title next to the image on small screens. Surely you would want it on top of the image to save horizontal space. Otherwise if its a long title you will have it wrapping many times and of course if the title is at the side then you may as well keep the other content to the side?

Unless I misunderstood.

If you do indeed just want the links below the image then keep the image floated and just clear the links.


@media(max-width: 600px){

If you want to change the order of items then you would need to revise using flexbox.

1 Like

Why do I always forget the simplest things.

The image would get smaller on small screen so the text would have more room and its just the design I’m working to

1 Like

Easily done with a max-width on the img container and usual responsive image set-up for the img itself.

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