• 0
Sign in to follow this  
Followers 0

Making mobile same as desktop


Question

Posted · Report post

I know DMS is all about being responsive but is there anyway to make the mobile version just like the desktop version? I have some edits on one of my sites that doesn't look good on mobile.

 

Thanks,

 

Mike

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Mike, each column in the 2 column section has a number associated with it, when you hover over it.  I think you may have the branding logo set to 4 as I pointed out earlier.  Between the two columns, the total value should be 12.  So, if the left column were 3, for example, make the right one 9.  You can play with these numbers, as long as you keep the value 12 as the total between them.  Also, we can also align the image to the right side of that media container.  There may be settings for that, so before I start giving you CSS, let's check the settings. Look for the image alignment option. Make it right aligned.

 

For the right side, this code may be of assistance:

#header .masthead .masthead-title {

    font-size: 96px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 18px;
}

#header .masthead {

    margin-bottom: 0;
    position: relative;
}

#header .pl-area .pl-section .pl-section > .pl-section-pad {

    margin-bottom: 0;
    padding: 8px;
}
 
Add the code above to Custom Code after you adjust your columns.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Mike,

 

There are ways to make the site look the same.  One is using the Browser Specific CSS plugin or directly.  Alternatively, if you have Framework installed on the website, but don't have it activated, you can temporarily activate it, and check the option to disable mobile view.  This may work, but it may also cause other problems with your site.  You're free to test it, then re-activate DMS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Mike,

 

There are ways to make the site look the same.  One is using the Browser Specific CSS plugin or directly.  Alternatively, if you have Framework installed on the website, but don't have it activated, you can temporarily activate it, and check the option to disable mobile view.  This may work, but it may also cause other problems with your site.  You're free to test it, then re-activate DMS.

 

I am not fully understanding what you are saying. The two problems I have with the mobile version is; 

 

1. I have a banner that is a background image for a section that doesn't fit right on the mobile version 

 

2. The navigation doesn't show all navigation links on the mobile. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What's the website Mike? I'll look at it.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

What's the website Mike? I'll look at it.

 

I have PM'd you.

Edited by mikeo9043

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Mike,

 

I've viewed your site on an Android device and indeed you do have some issues.

1.  The width of your header is causing the problem with the mobile view.  You're using a background image, with an empty space as a place holder to maintain the appearance you desire on computers.  Unfortunately, this is not proficient design for mobile views, whether it's an old view (non-responsive) or contemporary (responsive).  To fix this, you'd isolate the logo part of the background and turn it into a smaller image and I'd recommend making the green surrounding it transparent.  Assign a class to the header area, then include CSS for that class to make the entire header the green background color and set the min-height to 236px.  Add a two column section to the header.  In the left column, resized to 4 columns, add a Media Area and upload the logo.  In the right of the two columns, set to 8 columns, add a text box and create a new class for it too.  There, you can type in all caps, the brand name in your existing logo.  Set the CSS for that class to size, color and set the font you wish.  If you need more font choices, you can get the PageLines GoogleFonts Plugin, which will add over 650 choices. This will let you have fully responsive design.

 

2.  Your menu in the site is the Simple Nav, as visible on a computer.  In a mobile view, the site is selecting the Secondary Menu selected in Dashboard > Appearance > Menus.  All you need to do is use the options to select the proper menu in that location and where it says "Manage Locations".  You can also use DMS settings at Global Options > Navbar to deselect the Secondary Menu for mobile view.

 

Now these will not make the site look the same on a mobile device as they do on a computer.  We don't offer an option to disable mobile view in DMS.  The only way I know of to do that is to go into Framework (activated as your theme) and check Disable Mobile View from Framework's options.  I know version 1.0.3 of DMS may have disabled the connection between DMS and Framework, but it might still work. Then, you'd reactivate DMS.  Personally, I think that if you made the changes above, your site would look absolutely amazing in a mobile device.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

I made the two columns and also tried just making one column and resizing both media boxes but for some reason it keeps enlarging my logo more then the actual size.

 

EDIT: I figured that problem out. but now I need the two columns to come closer together. How can I accomplish this?

 

Thanks!

Edited by mikeo9043

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0