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

    • 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

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
×