Put content before left modules in responsive design


Author Message
Beth Worthy

Posted: 9/14/2015
Quote message 

I have an issue with the responsive design and I'm hoping someone can help me. I did search through the forums but didn't see an answer.

I have a design that shows 3 columns on the desktop version.

When I look at it on a mobile device, it shows the modules on the left side, then the content, then the modules on the right side.

I need it to show the content first, then the left modules and then the right modules.

How can I do this?
 
James G

Posted: 9/15/2015
Quote message 

You can use a script to move the elements when screen resolution scales down.

Insert in footer or somewhere at bottom of page.
Adjust the screen width as needed.

<script>
jQuery(document).ready(function($)
{
if ($(window).width() >= 768)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 768)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}

$(window).resize(function()
{
if ($(window).width() >= 768)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 768)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}
});
});
</script>


 
Natalie Marquis

Posted: 10/12/2015
Quote message 

Will this fix work for a Wordpress mobile site as well?

I have the same problem with a new website I just launched for http://grailproductions.com. We are getting complaints from users because they click on a link and the page doesn't appear to refresh. It does refresh, but our left and right side bar content is fixed content and doesn't change from page to page, therefore the customer keeps seeing all the same left sidebar content and doesn't think to scroll down to the middle section to find the main page content (from the center column).

The problem is Artisteer is automatically list content in this order:
1. Left Side Bar Widget items
2. Center Column (featured content)
3. Right Side Bar Widget items

Prefer this order:
1. Center Column (featured content)
2. Left Side Bar Widget items
3. Right Side Bar Widget items

Thank you
 
James G

Posted: 10/12/2015
Quote message 

Hey Natalie Marquis,

Yes the script above will work for wordpress.

example: http://wp.houslerwebdesign.com/

If you want to move the sidebars for just the phone then change the 768 to 480 or
any screen size you desire.

In artisteer, I inserted in the footer.
 
brian

Posted: 11/23/2015
Quote message 

Hi,
I found this thread on the forum and I have the same problem. When you say insert it into the footer, how exactly do I do this? Do I simply put it in an article, a custom HTML or in the template. Iam using Joomla

Regards,

Brian
Quote James G:

You can use a script to move the elements when screen resolution scales down.

Insert in footer or somewhere at bottom of page.
Adjust the screen width as needed.

<script>
jQuery(document).ready(function($)
{
if ($(window).width() >= 768)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 768)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}

$(window).resize(function()
{
if ($(window).width() >= 768)
{
jQuery('div.art-sidebar1').insertBefore('div.art-content');
}
if ($(window).width() < 768)
{
jQuery('div.art-sidebar1').insertAfter('div.art-content');
}
});
});
</script>




 
James G.

Posted: 11/23/2015
Quote message 

You can insert within artisteer by selecting footer on the menu tape.
Then select HTML and place below your footer code.

You can also insert when in joomla by editing the index.php
 
Marg

Posted: 3/4/2016
Quote message 

This is exactly what I need to do too. However I don't see HTML under Footer on the navigation ribbon. Am I looking in the wrong place?
 
Korresia

Posted: 6/3/2016
Quote message 

Thank you James, this fix has really helped !!