- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’ve created 3 widgets which display inline perfectly after the header but when i change the hook to the header hook, they display vertically.
How can i make them display in line in the header?
Here’s the CSS which works after the header:
.featured-one .widget {
float: left; padding: 0 2.8%;
width: 33%;
position: inline;
}
.featured-two .widget {
float: left;
padding: 0 2.8%;
width: 33%;
}
.featured-three .widget {
float: left;
padding: 0 2.8%;
width: 33%;
}
.featured-widgets {
background-color: #fff;
clear: both;
overflow: hidden;
padding: 30px 1px 0;
padding: 3rem 0.1rem 0;
margin-bottom: 20px;
margin-bottom: 2rem;
}
We’d need to see it in action.
Do you have a link or could you make a Codepen.
Here it is on a live site http://www.solutionsocial.com/
I think you need to change this:
.site-header .widget-area {
color: #fff;
float: right;
width: 33%; <----change from 600px to this
}