Hello Everyone,
I am a designer who is trying to learn and grow in my wordpress/CSS skills. I have been using X and other themes, but I am working towards committing to X pro across all my sites. In order to do so, I am taking the time to learn and research ideas.
I am wondering how to approach creating areas of text or images that overlap one another. I have done it before with negative margins, however, I would like to gain greater control so that I don’t end up with mistakes in my mobile layout.
Here are examples of what I’m looking to achieve:
-
First, a green container overlaps the slider or main image on homepage. In mobile the container also overlaps the slider or main image.
-
Second, about 1/3rd down page, a container (with an link to “View The Menu”) overlaps another container with image. There is also text underneath the “View The Menu” Container. However, on mobile, the underlying image and text are gone. (?)
- About 1/3rd down page there is a section with the title “Messages of hope and redemption.” This section has 2 main areas: on the left is text and on the right is an image. Overlapping this area are 2 containers (boxes) with links, which are shifted to the bottom and the right. On mobile, the image disappears and the link containers are underneath the other main container.
Any help that any of you can give is much appreciated. Thanx in advance. If you don’t have any answer, but took the time to read this whole thing: thank you and have a great day.
Sean Smith