Title: Welcom button
Last modified: August 22, 2016

---

# Welcom button

 *  Resolved [pandoraslunchbox](https://wordpress.org/support/users/pandoraslunchbox/)
 * (@pandoraslunchbox)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/)
 * Hello, does anyone know why the welcome button disappears on a reduced screen
   size please?
 * Is this a shortfall of the theme’s responsiveness or is it just my own site?
   
   [http://pandoraslunchbox.eu/](http://pandoraslunchbox.eu/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [WP SITES](https://wordpress.org/support/users/wordpresssites/)
 * (@wordpresssites)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395553)
 * 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.
 *  Thread Starter [pandoraslunchbox](https://wordpress.org/support/users/pandoraslunchbox/)
 * (@pandoraslunchbox)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395594)
 * 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?
 *  Thread Starter [pandoraslunchbox](https://wordpress.org/support/users/pandoraslunchbox/)
 * (@pandoraslunchbox)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395598)
 * I found this in the parent stylesheet
 * > }
   >  [@media](https://wordpress.org/support/users/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;}
 *  [WP SITES](https://wordpress.org/support/users/wordpresssites/)
 * (@wordpresssites)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395675)
 * 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.
 *  Thread Starter [pandoraslunchbox](https://wordpress.org/support/users/pandoraslunchbox/)
 * (@pandoraslunchbox)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395707)
 * the welcome button appears to be called “#masthead .welcome-button”
 * I found the CSS for the responsive layout:
 * > }
   >  [@media](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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
 *  [vladff](https://wordpress.org/support/users/vladff/)
 * (@vladff)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395715)
 * 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.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Welcom button’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/moesia/1.54/screenshot.png)
 * Moesia
 * [Support Threads](https://wordpress.org/support/theme/moesia/)
 * [Active Topics](https://wordpress.org/support/theme/moesia/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/moesia/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/moesia/reviews/)

 * 6 replies
 * 3 participants
 * Last reply from: [vladff](https://wordpress.org/support/users/vladff/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/welcom-button/#post-5395715)
 * Status: resolved