I am in the process of building a website. I am using a template I purchased and I want to add some blocks to the homepage. I want them to scale properly with mobile. I noticed on this website that the code is labled “sections” and it also has words in the sections. How can I build blocks like they have? Is there a ready made code and css to use that will give me a similar full width color with the ability to throw in images and or text that can be centered or such within the block?
It’s actually fairly standard stuff. Any block element, be it div, section, or whatever, will be full width of its container by default, (you will need to remove default margin from the body to touch the screen sides).
To get the colour, set the background-color.
Then you can put into the containers whatever you like and align it as you like.
So when you first open that website there are 3 blocks. I would love similar blocks. What are they called? I am sure there is code out there if I only knew what to search. I think I got the sections taken care of by using code from codepen.io
It messed up my website totally. Is there a way to make sure only the “section” pulls the CSS from this area? I think because the code is named similar to my websites CSS it conflicts.
Do I need to add the CSS from one of these things to the page I am on? Or in a <p> ?
I am not an expert coder as you can tell but I am trying to learn more. I have used code online before and never had it mess up my website.
You can’t just copy code from one place and paste it into another site/page and expect it to work.
It will need adapting to your page and content.
We have no idea about the page you are working on or how it’s made.
You mentioned a template, are you using a CMS or hand-coding?
Do you have a link to a live page or have the code for a working page you can post?
Without that we are very much in the dark.
How does one adapt the code? Is it a conflict like I think? I removed the CSS and my site looks normal again. Currently I am trying to build out the home page.
So like up top on my homepage.html I have to somehow link to a css file I can throw into my css folder? That should prevent it from conflicting with my other css right?
Separate files won’t solve conflicting css, the rules are still applied to the same page.
The conflicts come from css selectors. Either they are using the same class names to do different things, or there are different selectors targeting the same elements with different rules, there the most specific selector wins.
