Guys, I am having a really hard time because I am not able to set my logo all the way to the top-left part of my landing page. The only solution is to set to position: fixed, but then it will stick to the page and I do not want that, I just want to be in the main page. Example: the benefits part in the mig.
Without seeing the html its not possible to give the right answer.
If the logo is contained within that section then as @ralphm said put position: relative on the section parent and then you could absolutely place the logo within that section only.
Generally though absolute positioning is not the right answer.
If you do as we said above and change the position: fixed to position: absolute then the logo will be placed in relation to the header element (as that has position: relative applied). The logo will be placed at top left of the header 10% below that input (because the header has a margin-top of 10%).
Its not clear from that snippet whether you wanted it at the top of the header or top of the page assuming there is content above the header?
If you want the logo placed somewhere else then you will most likely have to move it in the html or remove position: relative from all ancestors until you get to the element you want it placed in relation to and then set that one to position: relative.
If you can post a link to the live version we may be able to fine tune it better for you
The code I gave should do that one way or another depending on what else is going on
Most people will deploy a test version live when developing. If you don’t have a live version then you can post the relevant css and html into a codepen that demonstrates your problem.
e.g.
Roughly like this:
It should have enough code to show what the problem is and how its structured etc. As you can see the logo is at the top of that section with the code I added.
I had no idea how to do the code pen thing, but I figure it out. I keep having the same issue, but now I am sharing the code pen with you, so maybe you can help me find where the problem is. You know where I want the logo and I made the changes you suggested, but look how it looks. Any ideas on where I am doing something wrong? Thanks for your help. https://codepen.io/Santiago-Marin-Robles/pen/RwmbbrO
You are placing the logo absolutely in relation to the header so it sits at the left of the header on top of the word ‘coconut’.
If you want the logo in the far left of the viewport window then you could do as Ralph suggests and just move the html for the logo so that its the first tag on the page.
If you wanted the logo at the far left of the section element but not at the top of the viewport then the logo html would need to be above the starting header tag (or remove position: relative from the header). However your section element is only as wide as the content because you set the body to display: grid and centred. therefore the logo still would not be at the far left of the viewport. You can see this is true because the gray background of the section element is very narrow.
If none of the above helps then we you may need to describe what you want to happen and why any of the above are not suitable.
Thank you guys! You are the best. That was the solution. I am still learning, and I would like to understand better how to manage grid size and all that stuff because the grid it is not really as I want it to be. I guess with practice. Thanks for all your help.
Well, I really do not understand what is going on because here in this code pen https://codepen.io/Santiago-Marin-Robles/pen/RwmbbrO there is the code that I am using. However, in the code pen it seems there is no issue, but in my code I cannot get rid of the green part that I put away in the red box.
You are applying that to every single element on the page via the universal selector which is a bad thing to do as it kills inheritance and makes it very difficult to style containers a different color because the content inside will all be that light green.
This happens in the contentwrapper1 section where you define a background color of white.
However any elements inside that section will be coloured green by the universal selector and the extra green you see is a green background applied to content1 in that section.
Remove the background color from that universal selector rule but instead apply it to the parent of the section as you have done with .pregunta-section. e.g For your first block it would be this: #coconut {background: #E5F6DF}
You may have the odd element that you need to color but you won’t get any stray unwanted elements being coloured.
Remember that most elements have transparent backgrounds so you only need to set the background color on the parent and all the elements inside will have that color as their background (apart from maybe a few replaced elements).
So, how can I handle this? There is too much space in the borders, and I want to organize the content better, but I am not sure where is the issue. Here is the code pen: https://codepen.io/Santiago-Marin-Robles/pen/RwmbbrO Thanks for all your help, guys
The class of .row has a max-width of 1170px and is centred in the viewport and holds that content in your screenshot . If you want the middle section wider then change the value of .row to something larger that suits you.
However don’t go too large or it will be awkward to read and look too spaced out.
