Challenge 1
Why Are the Fonts Acting Weird?
Why Are the Fonts Acting Weird?
Why is everything in this section acting like <h6> titles? Find the error and fix it.
Click me!
Challenge 1
Challenge 2
Align the Icons & Buttons
Align the icons in a way that guarantees that they will align perfectly (don’t eyeball it). Also fix the buttons so they align to each other.
Challenge 3
This font should be the default h2 size. Why is it so big on the live page?
Challenge 4
Hidden Text
Positioning CSS
The text on the image card may appear to be working in the builder, but on the live site it’s hidden behind the image element.
Fix the Order
In order to make the text visible it’s going to need a higher z-index than the background image. How can you do that? Hint: the classes already exist in Flatsome.
Challenge 5
Google map size
To fit the layout better, this map needs to be full width with a narrower height. To complete this challenge complete these two tasks:
- Make the map span the full width of the container.
- Adjust the height to 50%
Hint: Something to accomplish this already exists in the child theme.
Challenge 6
Turn these into clickable cards
The CSS code from this tutorial on the internal site has been added to this site. Implement it on these cards so that when clicked they open https://www.lemonadestand.org/.
Also, these cards need a 10px border radius. Make the images follow the 10px radius setting (notice the top left and right corners are not rounded even with the setting turned on).
Clickable Cards
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Clickable Cards
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
Challenge 7
Fix the icon alignment
Hint: Something exists for this in the child theme.
Vertical Align This Text
Vertical Align This Text
Vertical Align This Text
Challenge 8
Mobile Image
Absolute position
The image in this row is being absolutely positioned using the “Fill” class in Flatsome. That means it will take on 100% of both the height and width of it’s parent container (the column).
Disappears on Mobile
Since this row is set to equal, the image is taking on the height of these two text cards on Desktop. Once it breaks to it’s own row on mobile there is no height so it appears that the image is gone. How do we fix this?
Challenge 9
Squished form
In the live view of this section, the form is squished. Why? Can you fix it?
Hint
It has something to do with the row.
Send Us a Message
Fill out the form and our team will get in touch soon!