• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Altitude Pro button issues

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Altitude Pro button issues

This topic is: resolved

Tagged: altitude, button

  • This topic has 3 replies, 2 voices, and was last updated 7 years, 4 months ago by Davinder Singh Kainth.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 17, 2015 at 10:26 pm #165957
    SimplyAA
    Member

    Hi there. I have a strange thing happening in the Altitude theme. I'm using the buttons, just like in the theme instructions and they look great but when you hover on them the button expands and looks strange. It doesn't do this on the theme demo and I copied the code they gave.

    My site isn't live but here is the code I'm using: <a class="button" href="http://johnsonlapham.com/contact">Free Consultation</a>

    and I also tried: <p style="text-align: center;"><a class="button" href="http://johnsonlapham.com/contact">Free Consultation</a></p>

    Since the site isn't live I did a screen shot of before you hover over button here: http://www.loveasimplelife.com/temp/button1.png and one that shows it expanding when hovering over it here: http://www.loveasimplelife.com/temp/button2.png.

    It does this in all different areas and I didn't change any css that came with the theme.

    Here is the css that came with the theme:

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button,
    .widget .button {
    	background-color: #22a1c4;
    	border: 2px solid #22a1c4;
    	border-radius: 5px;
    	color: #fff;
    	cursor: pointer;
    	font-size: 14px;
    	font-weight: 800;
    	letter-spacing: 2px;
    	padding: 15px 25px;
    	text-transform: uppercase;
    	-webkit-font-smoothing: antialiased;
    	white-space: normal;
    	width: auto;
    }
    
    button:hover,
    input:hover[type="button"],
    input:hover[type="reset"],
    input:hover[type="submit"],
    .button.clear:hover,
    .button:hover,
    .footer-widgets button,
    .footer-widgets input[type="button"],
    .footer-widgets input[type="reset"],
    .footer-widgets input[type="submit"],
    .footer-widgets .widget .button,
    .widget .button:hover,
    .widget .button.clear:hover {
    	background-color: #000;
    	border: 2px solid #000;
    	color: #fff;
    }
    
    .button {
    	display: inline-block;
    }
    
    .widget .button.clear {
    	background-color: transparent;
    	border: 2px solid #000;
    	color: #000;
    }
    
    button:disabled,
    button:disabled:hover,
    input:disabled,
    input:disabled:hover,
    input[type="button"]:disabled,
    input[type="button"]:disabled:hover,
    input[type="reset"]:disabled,
    input[type="reset"]:disabled:hover,
    input[type="submit"]:disabled,
    input[type="submit"]:disabled:hover {
    	background-color: #ddd;
    	border-color: #ddd;
    	cursor: not-allowed;
    }
    
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button {
    	display: none;
    }
    
    /* Buttons
    --------------------------------------------- */
    
    .image-section .button {
    	margin-left: 5px;
    	margin-right: 5px;
    	margin-top: 20px;
    }
    
    .image-section .button.clear {
    	border-color: #fff;
    	color: #fff;
    }
    
    .footer-widgets button:hover,
    .footer-widgets input:hover[type="button"],
    .footer-widgets input:hover[type="reset"],
    .footer-widgets input:hover[type="submit"],
    .footer-widgets .widget .button:hover,
    .image-section button:hover,
    .image-section input:hover[type="button"],
    .image-section input:hover[type="reset"],
    .image-section input:hover[type="submit"],
    .image-section .widget .button:hover {
    	background-color: #fff;
    	border: 2px solid #fff;
    	color: #000;
    }
    

    Thanks for any assistance


    Angela

    September 18, 2015 at 1:13 am #165963
    Davinder Singh Kainth
    Member

    Few things that you can try:

    1. Add width: auto to "button:hover" section.

    2. Re-download altitude pro theme, then replace style.css file via ftp.


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

    September 18, 2015 at 1:57 am #165975
    SimplyAA
    Member

    Thank you very much! it already had the auto width so I downloaded the theme again and went through all my changes and figured it out. I had another area set with a block setting that was messing it up.

    Thank you very much. I never would have figured this out without the tip on going back to the original style.css.


    Angela

    September 18, 2015 at 1:58 am #165976
    Davinder Singh Kainth
    Member

    Welcome Angela.


    Sunshine PRO genesis theme
    Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Altitude Pro button issues’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble