Moving title and background color next to title image

confused with how to do this…want to create a submittal form with images placed next to text/radio buttons/etc. with background color…can’t figure a way to align photos with background color and text

Hi halfmeasuresroom),

Firstly. take a look into structuring the html code to include a ‘doctype’ declaration, ‘html’ and ‘body’ tags. This ‘global structure’ of an html page forms the basis of every html document structure and is considered ‘best practice’ - this article shows a good explanation:

https://www.w3schools.com/html/html_basic.asp

For example - all the links at the top of your html would be wrapped in a ‘head’ tag (this is different to a ‘header’ tag), and also a ‘body’ tag etc. This structuring will also help with the layout you are after. Think of this global document structure as your template for all your web pages.

Your potatoe image is very large, and the elements do not appear to be responsive when i resize and make my browser window smaller or larger (on my browser anyway). Have look at the CSS and html sections in the freeCodeCamp curriculum about images, sizing and responsive design. Again, by structuring the html page appropriately, you can place these image, heading an button element into various ‘sections’, ‘articles’, or divs etc, and this will help achieve the final layout you are after.

For positioning and laying-out elements on a page checkout the flexbox and grid sections of freeCodeCamp. Grids are good at positioning elements across multiple columns on a page. Flexbox is good to get things lined up nicely in single rows or columns. You an use both flexbox and grids together if you like. You should be able to achieve the layout you are after layout easily with either, or both, flexbox and grid properties.

Flexbox article:

Check out the grid exercises here on FCC - and have a look at this website also:

You have made a good start! The more you practice with the exercises, the less confusing it becomes - I know this from experience also! :smiley:

1 Like

Thank you! That has helped out alot! Still, not exactly how I want it. But, like you said, practice makes perfect! :wink: