Jump to content

Archived

This topic is now archived and is closed to further replies.

amb62137

Media Queries Styling

Recommended Posts

amb62137

I am looking override media queries but can't seem to get them to work properly. I've added the following (with css styling):

 

@media screen and (max-device-width: 480px) {

*/Styles/*

 

But am unsure how to find out which style classes I need to add to make my site a 100% width on a mobile device. (Not mobile view)

 

Any advice would be greatly appreciated! Thank you!

Share this post


Link to post
Share on other sites
Danny

HI,

 

Not entirely sure what it is you're trying to do, what do you mean make your site 100% width on mobile devices not mobile view ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
amb62137

Make it so that 100% of the website shows when viewing it on a mobile device. It currently breaks up my entire site and stacks everything on top of each other.

Share this post


Link to post
Share on other sites
amb62137

I've also added this to the header.php:

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

I just am unsure of what classes or IDs need to be styled in order to scale the entire website page to fit within a mobile screen. I would also like to find out how to make a desktop browser use the scroll bar instead of "stacking" or "shrinking" images and content.

 

Thank you!

Share this post


Link to post
Share on other sites
James B

Hi there, from what you've described previously it sounds like you want to disable the mobile view, so your site appears like the desktop version on a mobile but scaled down?

 

If so, see this post which has the code in to disable the responsive mobile view. http://forum.pagelines.com/topic/31053-dms-111-disable-mobile-view/?hl=dms


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
amb62137

Thanks! That solved most everything. The one thing that doesn't work using that method is the nav bar. It puts 2 of my page links below the rest of them. I currently have the navigation separated using columns: left column with 3 items, middle column with my logo and the right column with 3 items. 

 

Is there a way to still use this code but shrink the navigation in mobile view? I'm guessing not since the "disable" code removes @media capabilities. Thank you!

Share this post


Link to post
Share on other sites
amb62137

Just tested it again and for some reason everything is placed correctly this time. Thank you for the help! 

Share this post


Link to post
Share on other sites
James B

You're welcome, glad you got resolved. Thank you for updating the thread.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • Bleuy
      By Bleuy+
      How can I get support on pagelines DMS? The product isn't that old and my skeleton themes aren't working and I can't get support in the same way? 
    • Bleuy
      By Bleuy+
      I have a number of legacy websites that are running on the above version of Pagelines DMS, where the template has stopped working. I am using a skeleton theme to all of them. What do I need to do to rectify this.
       
       
    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a few weeks ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

    • tuciudadenred
      By tuciudadenred+
      Hi everyone, what happens is that the web page metrosalarmas.com has a google tags which I have not attacked where I can look to remove those tags and be able to locate the correct ones.
    • Steve Webb
      By Steve Webb+
      I am having an issue with DMS editor not loading.  Just keeps spinning and spinning.
      Have tried several things - Logged in and out, cleared cache, deactivated all plugins, but the issue persists.
      I even had our host restore from a backup a week ago, when I know it WAS working, as I edited a text box on the homepage.  The restore from backup didn't help either.
      Also, the front end of the site shows that the site is framed, or boxed now (whatever you call it), instead of full width as it was previously (last week).
      Dev console shows that there are php errors in Google maps - file is attached.
      Can someone please help?  Not sure what else I can do here...
      Thanks in advance.
      -Matt

×