thanks this didn’t work but it’s fine I found out how to resolve it
To save another topic from being opened, can someone please advise on how to create css boxes split into three sections that each have text inside with different colors depending on the row as shown in the image below?
@NiSofwareEngineer You have an extra </div>
tag at the bottom. Look at the syntax highlighting of you editor. It should be off a bit to let you know the syntax needs fixing. You could paste your code into an HTML validator to check for errors also.
1 - How to get the navbar to be transparent and the text positioned as in above image?
2 - How to position ‘‘Recycle your nespresso in style!’’ to where it is in the image as well as the text underneath it?
3 - How to position images for the google play store and apply play store to be in the image above?
These are all questions you should figure out by learning CSS, I can’t show you how to do everything. I hope you understand.
Give it opacity: 0 (edit: don’t know why I would say to use opacity, you should obviously use a transparent background color, my bad) and use some form of positioning (flexbox is a good choice here).
Again, use some form of positioning.
They are likely inside the same container as the text above them.
It looks to me like there is a container around the elements. If you look at the left alignment of the nav logo, the text, and the buttons they all are aligned. Likely from being inside a container with some max-width set (like a Bootstrap container).
The above is trying to add a Prices heading to that section. If it’s outside the section with class=prices, it leads to me getting a white line underneath the text as shown in the image.
I’m having a similar issue with trying to make the navbar transparent. I used background-color : transparent and I expected that to do the job but again it leaves a white line at the bottom of the nav bar.
It looks different on codepen, when run on my local machine the navbar is transparent except for that odd white line at the bottom.
I thought the hardest part would be getting the Map API at the bottom with markers but I managed to do that. Setting up the text and logos to fit nicely inside the background image at the top is the challenge!
Your use of Bootstrap mixed with your own CSS actually makes it harder for me to help you.
I have to go through all the HTML and Bootstrap classes/components you are using (and see if they are used correctly). Then I need to check how the CSS you are adding yourself is affecting not only the page but Bootstrap. For example, you are using the navbar-fixed-top Bootstrap class but then you are setting some of the same properties again in the .navbar class. It is a bit of a pain to do within any reasonable time.