-
AuthorPosts
-
May 10, 2014 at 11:09 am #262752
Hi,
Is it possible to change the display layout order of columns / items on a page just for the responsive side of the theme?
As an example I have landing pages with a column of text (information about me) in a 1/4 text box then information about the topic of the landing page in a 3/4 text box. When people hit my landing page on mobile devices I want them to see information about that landing page before they see the information about me. As it stands at the moment the first column (1/4) is displayed before the second (3/4). All landing pages use the same layout template so I am hoping that I can change this just for that.
Hopefully you can see what I mean by clicking here: http://marcgodfreeweddings.co.uk.gridhosted.co.uk/wedding-day-advice/wedding-venues/wedding-venues-kent/brandshatch-place-weddings and viewing on both desktop and mobile devices.
I am happy with the layout that is viewed on computers just need a few tweaks if possible for the responsive side for mobile devices.
Thanks
MarcMay 12, 2014 at 4:36 am #263103Hey Marc!
You can try re-doing those columns and wrapping both groups in Color Sections with different IDs (respectively), then you can play around with CSS to hide/show them based on the screen size:
/* This will only be applied on desktop */ @media only screen and (min-width: 768px) { #mobilecolumns{ display: none; } /* This will only be applied on mobiles */ @media only screen and (max-width: 767px) { #mobilecolumns{ display: block; } #desktopcolumns{ display: none; } }
Best regards,
JosueMay 12, 2014 at 1:21 pm #263263Hi Josue,
Thank you for your reply and help. I am almost there thanks to yor code and suggestion. What I have done:
Created a test landing page: http://marcgodfreeweddings.co.uk.gridhosted.co.uk/test-landing-page
Created two colour sections with my two columns. One has been given the ID “desktopcolumns” the other “mobilecolumns” The only difference is the order that the content should be seen.The code you kindly supplied hides the “mobilecolumn” when displayed on a desktop machine – Perfect! Unfortunately it also displays both colour boxes on a mobile device. I am sure it is just a simple change but I can’t for the life of me work it out even after playing with the code. Sorry not being a developer I just tent to bumble my way through code until it works but got stumped here!
I have reverted it back to the code you have supplied but would appreciate any pointers in hiding the “desktopcolumn” on mobile devices.
Kind Regards
MarcMay 12, 2014 at 6:11 pm #263402Hi!
There was a typo on the code, my fault (unclosed bracket). Try with this:
/* This will only be applied on desktop */ @media only screen and (min-width: 768px) { #mobilecolumns{ display: none; } } /* This will only be applied on mobiles */ @media only screen and (max-width: 767px) { #mobilecolumns{ display: block; } #desktopcolumns{ display: none; } }
Cheers!
JosueMay 12, 2014 at 6:43 pm #263439Perfect, I just need to play around with the space and border formatting now but looking good!
Thanks again Josue :-)
May 12, 2014 at 6:45 pm #263441You are welcome, glad we could help :)
Regards,
JosueMay 12, 2014 at 8:25 pm #263506Hi Josue,
I have found a piece of code that helps to adjust the padding for the color sections:
.avia-section { min-height: 30px;
padding-top: 5px; }I am having problems reducing more of the white padding both above and below the color sections. I have tried the above code with different values and also the white spacers to no avail. It is also more prominent when viewed on a mobile device, any thoughts on how I can reduce more of the white space that is present?
Kind Regards
MarcMay 12, 2014 at 8:38 pm #263519Hey Marc!
This will help reduce the spacing a little bit:
.container .content { padding-top: 0 !important; }
Regards,
JosueMay 12, 2014 at 9:58 pm #263584Thanks Josue,
I have tried that section of code but it loses the title “A – B” above the image and doesn’t seem to affect the white space below the image (before the start of the color section) and immediately after the color section. Adjusting the spacing didn’t seem to adjust the whit space either.
Sorry to be a pain but any other pieces of code I could try?
Thanks
MarcMay 13, 2014 at 3:50 am #263715Hi!
Thank you for the info.
Do you mind using a Special Heading element for the “A – B” title in place of the text block? Enclose the elements inside a color section then add this on Quick CSS or custom.css:
.avia-section { min-height: 50px; } #top #main .avia-section .template-page { padding-top: 10px; padding-bottom: 10px; }
Best regards,
IsmaelMay 13, 2014 at 12:50 pm #263907Thanks Josue & Ismael,
I have included the main components within color sections and added the special heading as suggested. My custom ccs code now includes the following:
/* This will only be applied on desktop */ @media only screen and (min-width: 768px) { #mobilecolumns{ display: none; } } /* This will only be applied on mobiles */ @media only screen and (max-width: 767px) { #mobilecolumns{ display: block; } #desktopcolumns{ display: none; } } .container_wrap { border-top-style: none; } .container .content { padding-top: 10px !important; } .avia-section { min-height: 50px; } #top #main .avia-section .template-page { padding-top: 10px; padding-bottom: 10px; }
The spacing is a lot better on both my desktop and mobile devices but on the desktop the main content has been moved over to the right. Any ideas what is causing this?
I have also noticed that this code is removing the border lines for all pages under where the page titles are. Is there anyway to restrict this just to my landing pages?
.container_wrap { border-top-style: none; }
Many Thanks
Marc- This reply was modified 10 years, 7 months ago by MarcG5.
May 13, 2014 at 5:04 pm #264049Hi!
Check the order is right in the Layout Builder.
To limit the code to a specific Page:
.page-id-5042 .container_wrap { border-top-style: none; }
Best regards,
JosueMay 13, 2014 at 6:55 pm #264120Sorry Josue, I couldn’t get this going and found that the custom css I had above was having a knock on effect with the rest of the site and page layouts.
If this code could be set for just my landing-page templates then that would possibly work a little better, but I am finding that I am falling further behind and just introducing more problems.
I have now removed this code and am exploring different ways of getting my landing pages to display correctly both in normal and responsive views. I will hold on to this code and may revisit it if I run into more problems.
I appreciate your help in getting me this far and hope I get it the problems resolved soon.
Kind Regards
Marc- This reply was modified 10 years, 7 months ago by MarcG5.
May 14, 2014 at 7:12 am #264506Hi,
As always, thank you for using the theme!
You can use the body page id to modify elements on a specific page. In order to find the current page id, you can use firebug or google chrome’s inspect element. Look for the body class id. It looks something like this:
On the example above, the page id is page-id-734. Use that along with the object’s selector that you are trying to modify. Something like this:
.page-id-734 .avia-section { min-height: 50px; }
I hope this helps.
Regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.