Images with the class figure_right should now appear to the right of the text (the text should wrap around them to the left). On the other hand, the images should continue to appear on a separate line on small screens, but centered in the browser window (if they are narrower than the viewport).
In this instance too, we need to decide between the two approaches: Desktop First and Mobile First. As, in the first scenario (Desktop First) — in a similar way as in the example in section 6.3 — we would need to start by assigning the float and margin properties, and then reset them again for mobile devices, we opt again for the simpler Mobile First option:
Begin by assigning — without media queries — the properties for mobile devices:
This action centers the image in the browser window and maintains spacing above and below in relation to the surrounding text.
Just remember that the element with the class figure_right
is not the image itself, but the surrounding figure element. We therefore also still need to assign properties to the image
Next, insert the definitions for a breakpoint of, let’s say, 800px. Remember for the min-width to add 1 again.
The figure should only still occupy 30% of the width of the content area and appear to the right of the text. It should also have some spacing to the text.
The image itself should fill the whole width of the surrounding figure element. In addition, we should also remove the margin again:
The entire code for the images should now be as follows:
The image captions figcaption have already actually been designed by us. They adjust their position automatically.
Design a lightbox for the image using CSS. Use the :target pseudo-class to do this. Also add the HTML code required. You do not need any media queries for this.