News Theme – screen resolution CSS

[benconnor]

Hi guys,

Would really love some help.

I'm using the News theme. As with most sites, the widget boxes, menus, header etc change as you change the screen size. When the screen is reduced to a certain size the side bar disappears. If you scroll to the right, its not there. What is the css that makes it disappear? Is there any way that I can stop it from disappearing?

The reason I'm asking this, is that I want my site to look the same on different devices. I want mobile users to be able to scroll to the right to my web form when my video directs them to it.

Would really love some help with this 🙂

Thanks

My website is http://benconnormusic.com/

Cheers,

Ben

[Susan]

The sidebar doesn't disappear on a mobile device - it moves to the bottom of the screen...

 

[benconnor]

Hi Susan,

Thanks for your response 🙂

You've said:
The sidebar doesn’t disappear on a mobile device – it moves to the bottom of the screen…
What is the HTML, CSS or functions.php that makes it move to the bottom of the screen? Is there any way to turn this off so that it can be seen when you scroll to the right.
But, to answer your question on how to make a site non-responsive:
First you will need to remove the responsive section from your stylesheet. Then, you will need to remove the viewport metadata from your functions.php file (look for something similar to this): /** Add Viewport meta tag for 

mobile browsers */
add_action( 'genesis_meta', 'child_add_viewport_meta_tag' );
function child_add_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

 

I'm not sure I want to make the site non-responsive, I just don't want the side bar to move to the bottom of the screen.

Is this possible?

That said, if the site is unresponsive, does that mean that boxes won't change size to ensure that the text and media enclosed run outside the parameters of the screen?

If it doesn't mean that, then maybe non-responsive is an option..

Thanks again 🙂

Ben

[benconnor]

Hi Susan,

I have made the site non-responsive by doing as you advised and it is exactly what I wanted.

Thank you so much!!! 🙂

The only thing I have now is that the header description text on smart phones shifts to create two lines when I zoom in close - doesn't do this on desktops cause i put in a #MainWrapper (for some reason smart phones don't recognise this). Is there anyway of stopping it from doing this?

Also, the 'Papyrus' font I have chosen for the header title does't seem to work on smart phones. Is that cause smartphones don't support that font or something. Any ideas?

Thanks once again for your great help!!!

Ben

http://benconnormusic.com/

[Susan]

I'm glad you've gotten your original issue solved. Can you please start a new thread about your next question - I don't immediately know the answer, and by starting a new thread, you'll get new eyes looking at it.

As for Papyrus - some fonts don't render as well on mobile devices - you might want to look into a front built for web browsing - I like googlefonts - they have a lot of free fonts, and they may work better on a mobile device.

[benconnor]

Okay. Will do. Thanks 🙂

 

[Author]

Posts