Site Display on Mobile

Permalink
My current problem is how my sites displays on mobile.

Attached is pieced together screenshots of my desktop site and how it displays on mobile.

As you can see in the attachment....the blocks get pushed to the left half of the screen on mobile. The right side on the screen is empty(except for header & footer). Also, the header & footer background don't fit across the entire screen.

I would like the mobile version to look like the desktop. How can I accomplish this?

I noticed this site urbansiding. com uses the same theme(Silence). When I view it w/ mobile it's almost identical to the desktop version.

Thanks!

1 Attachment

 
hostco replied on at Permalink Reply
hostco
The reason you are having issues with the responsive design on mobile is because the layouts that you have added to the page are not responsive.

Try to use a page type that that has more of the layout your using instead of using layouts. This way when resizing the page it will not squash together like it is now.

If you want to remove the themes responsive ability period and have it display on mobile the same way it does on a desktop, you will need to modify the themes css to remove the elements that make it responsive.

Some themes come with a separate css file with all of the responsive elements in that file. For themes like this you can simply remove the link to the css file from your header.php file.

The silence theme appears to have all of the css combined in one file named blender.css.

This is the file that will need to be modified to accomplish your goal.

Before you start on any modifications, first contact sebastienj and see if he has modified the css for anyone else who has wanted a desktop version of silence. This could save you some time.
Sublime replied on at Permalink Reply
Thanks for the response!

I'll play around w/ page types, and if that doesn't work for me I'll contact Seb before I mess w/ the CSS.

Thanks again!