Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 8, 2015 at 5:18 pm #484821
    Eva

    Hi,

    I’ve just set up a website with your theme. So far I like it very much. I just need some help tweaking some details.

    I added several columns to some pages using the “Layout Elements Tab” in the “Avia Layout Builder”. When viewing my website on a desktop pc in fullscreen mode these columns are arranged side by side. When reducing the browser width, in “mobile view” so to speak, the columns become arranged one below the other.

    The Layout is set to “Streched Layout”, the check box “Responsive Site” is selected.

    I’m looking for a way to manipulate the trigger point from “desktop view” to “mobile view”, to be exact I’m looking for some code to rearrange the columns one below the other as soon as the browser width falls short of XXX px.

    You help would be greatly appreciated!

    August 10, 2015 at 10:12 am #485120
    Rikard

    Hi Eva,

    Please post a link to your page and what elements you would like to change at what pixel value please.

    Thanks,
    Rikard

    August 15, 2015 at 11:51 am #488212
    Eva

    Hi Rikard, thank you for your reply!

    See “Private Content” for the URL to my website.

    When trying to reduce the size of your browser window on Desktop, you will notice, that there are unpleasing line breaks in the Telephone Numbers / “E-Mail schreiben” – bit in the “Kontakt”-Section as soon as the browser width falls below a certain point. If you reduce the browser width further, the mobile view is triggered. The “Kontakt”-Section moves from the right to the bottom of the page. I am looking for a way to trigger this mobile view a bit earlier, as soon as the browser width is decreased below X pixels (I still need to figure out the correct value for X).

    August 16, 2015 at 11:50 pm #488466
    Dake

    Hey!

    The below media query can be found in your layout.css file (wp-content\themes\enfold\css), starting from line 3264.

    You can change the “trigger point” of 768px (preferably using a child theme) to your liking:

    /* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 989px) {

		.responsive .main_menu ul:first-child > li > a { padding: 0 10px; }
		.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=100); }
		.responsive #main .container_wrap:first-child{ border-top:none; }
		.responsive .logo{float:left;}
		.responsive .logo img{margin:0; }
		.responsive .av_mobile_menu_tablet .main_menu .avia-menu{display: none; }
		.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks { right: 50px; }
		
		.responsive.js_active .avia_combo_widget .top_tab .tab{font-size: 10px;}
		.responsive.js_active .avia_combo_widget .news-thumb{display:none;}
		
		.responsive #top #wrap_all .grid-sort-container .av_one_sixth{ width:33.3%; margin-bottom: 0;}
		.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header, .responsive.html_boxed.html_header_transparency #top #header{max-width: 100%;}
		}

    Best regards,
    Dake

    August 17, 2015 at 11:29 am #488776
    Eva

    Thank you for your reply! Unfortunately that didn’t work for me.

    I changed the following lines in layout.css:

    	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 900px) and (max-width: 989px) {

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 900px) {

    Changing only the first line, as advised, didn’t help either.

    Do I need to change anything else, maybe in the .js-files?

    August 17, 2015 at 3:52 pm #488964
    Dake

    Hey!

    Please try editing the breaking points found in your grid.css instead.

    Each media query can be found on lines 86,98,151,340, respectively.

    Best regards,
    Dake

    August 17, 2015 at 4:41 pm #488996
    Eva

    Great, that works! :-)

    Thank you!

    August 17, 2015 at 5:30 pm #489036
    Dake

    Hey!

    You’re welcome, glad I could help :)

    Please let us know if you ever need help in the future.

    Cheers!
    Dake

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Trigger Point for Column Order’ is closed to new replies.