Couldn’t find the welcome button but it might be coded that way in the CSS for the Media Queries which you can check in the style sheet.
thanks for looking Brad, the welcome button is the “Open…It!” label above the box hinge on the header photo. It is only visible on larger screens
I’ve never searched a whole stylesheet for something. Is there a way to do it without reading it all?
I found this in the parent stylesheet
}
@media only screen and (max-width: 499px) {
.project,
.service,
.employee,
.bq-text,
.bq-img {
width: auto;
}
.project img {
display: block;
margin: 0 auto;
}
section .widget-title {
font-size: 36px;
}
.welcome-title {
font-size: 24px;
}
.welcome-logo {
max-width: 100px;
}
.welcome-desc {
font-size: 20px;
color: #D8D8D8;
text-shadow: 0 0 2px #222, 0 0 2px #222;
}
.welcome-button {
font-size: 14px;
margin-top: 30px;
}
Inspect the button using a Browser app like Firebug or Chrome Inspector and then you’ll find the class. You can then search using Notepad++ for the CSS for that class.
the welcome button appears to be called “#masthead .welcome-button”
I found the CSS for the responsive layout:
}
@media only screen and (max-width: 600px) {
.hentry .entry-thumb,
.post-content {
width: 100%;
padding: 0;
}
.entry-title {
font-size: 25px;
}
.welcome-desc,
.welcome-button {
display: none;
}
}
@media only screen and (max-width: 499px) {
.project,
.service,
.employee,
.bq-text,
.bq-img {
width: auto;
}
.welcome-button {
font-size: 14px;
margin-top: 30px;
It seems to be cancelling the welcome button for all screens below 600px (bold type) so perhaps I could override this with CSS and see what it looks like?
I have no idea what CSS to use to overide the command “display:none” though, and I can’t find anything by googling or looking at css tutorials
Add this to a custom CSS plugin:
@media only screen and (max-width: 600px) {
.welcome-button {
display: block;
}
}
We did it like this because there is a good change that the button won’t fit on small screens if the user adds a lot of content to his header area. But if you feel that you have enough space for it, the above code will display it.
If it’s needed for smaller screens in case 320px or something you don’t have space for it, copy the code above and change 600px to the value you want and block to none.
