Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #734954

    Hello again guys,

    I have 2 x-large buttons horizontally adjacent to one another. Is it possible to shrink every aspect of them (text and overall size) at the same ratio for small screen sizes? Is there some kind of percentage value I could use in quick CSS to achieve this?

    Many thanks in advance!

    James

    #734979

    Hey Jambo!

    Can you please provide us a link of your web site?

    Thank you very much

    Best regards,
    Basilis

    #735072

    Hey Basilis,

    The buttons I’m looking at in particular are ‘book’ and ‘contact’.

    Thanks!

    James

    #736292

    Hi,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:960px) {
    	#top.home #av_section_5 .flex_column.av_one_fourth {
    		margin: 0 1% !important;
    		float: left;
    		clear: none;
    		width: 48% !important;
    	}
    
    	#top.home #av_section_5 .flex_column.av_one_fourth.first, 
    	#top.home #av_section_5 .flex_column.av_one_fourth.avia-builder-el-last {
    		display: none;
    	}
    	
    	#top.home #av_section_5 .flex_column.av_one_fourth a.avia-button.avia-size-x-large {
    		font-size: 1em !important;
    		padding: 1.2em 0.9em;
    		min-width: 90%;
    	}
    }

    Let us know if this helps :)

    Best regards,
    Nikko

    #736536

    Hey Nikko,

    Thanks again for your help with this site, the code seems to work brilliantly!

    If I were to be very picky, the only thing wrong is when viewing the site on my iPhone 5, the overlay of the colour section does not extend to the bottom of the section in landscape but fine in portrait. There looks to be about a 10px gap at the bottom of the section in landscape. Would you have any suggestions?

    Thanks,

    James

    #738045

    Hi,

    You’re welcome. :) Try adding this code:

    .av-section-color-overlay-wrap {
        padding: 10px;
    }

    and place it just below this code (from the code I gave before):

    	#top.home #av_section_5 .flex_column.av_one_fourth a.avia-button.avia-size-x-large {
    		font-size: 1em !important;
    		padding: 1.2em 0.9em;
    		min-width: 90%;
    	}

    Hope this helps :)

    Best regards,
    Nikko

    #738521

    Hey Nikko,

    Works a treat, superb stuff! You can close this thread.

    Thanks a million,

    James

    #738768

    Hi James,

    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Re-sizing buttons with tablet/mobile screen sizes’ is closed to new replies.