Responsive layout – section ordering

Hi 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
Marc

Perfect, I just need to play around with the space and border formatting now but looking good!

Thanks again Josue :-)

Hi 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
Marc

Thanks 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
Marc

Thanks 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 9 years, 11 months ago by MarcG5.

Sorry 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 9 years, 11 months ago by MarcG5.