Challenge 1
Why Are the Fonts Acting Weird?
Why is everything in this section acting like <h6> titles? Find the error and fix it. (answer: the h6 tag wasn’t closed properly)
Click me!
Challenge 2
Align the Icons & Buttons
Answer: Size the icons with the same ratio (usually square). Pull the buttons out of the icon box so they can use the row flex box to align themselves.
Map Icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci mi. Cras eget tortor massa. Sed at interdum libero, vel aliquam sem.
Lemonade
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
User
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci mi. Cras eget tortor massa. Sed at
Challenge 3
This font should be the default h2 size. Why is it so big on the live page?
Answer: Desktop size was not set, so it was taking on the mobile size. Either remove the mobile value or add a Desktop text size.
Challenge 4
Hidden Text
Answer
Text by default is position static which means the browser will display it before any other z-index type elements. If we use the class “relative” to put position: relative on our text element, this makes it an element with a z-index and will bring it to the top.
Z-index
Another option is to use the z-index classes in flatsome to give the text box a z-index. z-top is usually does the trick. There is also z-1 through z-5 if you need to be more fine tuned.
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. – Wrap your google map in a div with the class “google-maps” to make it full width.
- Adjust the height to 50% – The height is coming from the container padding-bottom value. You can change this value in the child theme css.
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).
- Add an empty <a> tag with the class clickable-card-link. Add link to open in a new tab.
- On the column add the class clickable-card
- On the column add the class show-radius
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
Add the class align-icons. Note that in most cases this doesn’t work great when there’s more than one line of 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. Set the padding on mobile to set a new height. Don’t forget to set the Desktop to 0px.
Challenge 9
Squished form
In the live view of this section, the form is squished. Why? Can you fix it?
Answer
The classes on row-equal are messing with the form. Either set the row to align top (we don’t really need the equal functionality here) or use the no-align class on the row.
Send Us a Message
Fill out the form and our team will get in touch soon!