Archived topic
make hook element full width
3 replies · Started by Cynthia on January 30, 2022
I am trying to create a headline title bar on my Journal(Blog) webpage to match all other sub-pages using a hook element and can't get it to match exactly. Using max-width:100% doesn't do anything. I only want the title bar to be full width not the blog content area. I also can't get the <hr> to move to the center under the title.
This is the code in hook element:
<hr class="journal-title">
________________________________________________________________________________
Custom CSS for my <hr>
hr.journal-title {
border-top: 0.009em solid #ffffff;
margin-top:15px;
margin-bottom:20px;
padding-bottom:0px;
width:10%;
}
Hi Cynthia,
The one you're trying to recreate actually isn't full-width as well. If you check it on a high-resolution screen, it looks like this -
https://share.getcloudapp.com/nOu9Xyyw
To answer the question for the Hook Element:
To make it true full width, consider modifying the the classes used on the HTML inside the Hook element.
Try removing grid-container class. :)
Hi Elvin
Ok I fixed the background image to display how I like by moving the image and style to the after_header div. And also fixed the other background images via css.
Now just trying to get the <hr> to move to the center under the word JOURNAL
<hr class="journal-title">
This is my css for the <hr>
hr.journal-title {
border-top: 0.009em solid #ffffff;
margin-top:15px;
margin-bottom:20px;
padding-bottom:0px;
width:10%;
border-width:2px;
}
Try replacing .journal title's margin-top and margin-bottom property with this:
margin: 15px auto 20px auto;
