Tagged: , , , , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 17, 2017 at 8:02 pm #734954
    Jambo

    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

    January 17, 2017 at 9:20 pm #734979
    Basilis

    Hey Jambo!

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

    Thank you very much

    Best regards,
    Basilis

    January 18, 2017 at 2:02 am #735072
    Jambo

    Hey Basilis,

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

    HOME

    Thanks!

    James

    January 20, 2017 at 8:51 am #736292
    Nikko

    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

    January 20, 2017 at 3:40 pm #736536
    Jambo

    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

    January 25, 2017 at 1:10 am #738045
    Nikko

    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

    January 25, 2017 at 7:00 pm #738521
    Jambo

    Hey Nikko,

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

    Thanks a million,

    James

    January 26, 2017 at 8:24 am #738768
    Rikard

    Hi James,

    Great, glad we could help :-)

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

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Re-sizing buttons with tablet/mobile screen sizes’ is closed to new replies.