Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree1Likes
  • 1 Post By ShaneATL

Thread: Need Help with VIEWPORT Please

  1. #1
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times

    Need Help with VIEWPORT Please

    Good afternoon, I am having some problems with a Mobile ViewPort.

    I would definitely consider myself a BEGINNER as far as web dev goes. Web dev is not my area of expertise, and I have the task of making changes and updates to a website that I did not design.

    As I am sure many of you know, Google is now making sure everyone's site is now mobile-friendly, which requires changing quite a few features on our website, including the viewport.

    I have come across the correct (I believe) code to use, which is:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    I am hoping this is correct, but I can't seem to find where to properly insert the code.

    The site I am managing is HTML and CSS, and I am currently using Adobe DreamWeaver to design/code.

    If there is anyone willing to help me, I would be BEYOND appreciative. And just to be honest, I am somewhat of a beginner and may need a little extra help with the explanation.

    Thank you so much in advance, I look forward to hearing from anyone willing to help me!

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    If you understand html/css then just use media queries. Id avoid using dreamweaver as a WYSIWYG editor but if you use it as a normal text editor thats fine. Id recommend however you choose to do it to NOT use DW's display as a way to test it. Use a browser to see what you have done. Using DW's preview feature you arent getting the true end results. Browsers will more than likely display things differently than it appears with DW.


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times
    Capture.JPG

    This is the screen I am looking at BTW.

    I have no idea what to add and what properties to use.

  5. #4
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times
    I very much appreciate your response.

    However, I am still lost as far as the MEDIA QUERIES.

    I see where to add them with the "+", as I am using DW CC 2014, amd "Media Queries" isn't under the "Modify" selection at the top.

    I see several different options when I am looking at the Media Queries options, and didn't know if you'd be able to kind of assist me step-by-step.

    I have definitely tried googling this but I am still left lost unfortunately.

    I hate sounding like such a newbie, but unfortunately in this case I definitely am

    I don't know if it helps, but the website is Granite Countertops Atlanta & Discount Granite Counters - MC Granite Countertops

    Any help with this would be greatly appreciated as I am under the gun and pretty much lost.

    Thank you so much for your time and expertise!!

    I am definitely willing to use something other than DW if I have to. The only reason I am using it is because it is what the previous person used.

  6. #5
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Do you have an experience with HTML and CSS? ( i assume no)


    Sent from my iPhone using Tapatalk

  7. #6
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times
    Very little HTML (basics), and really none with CSS. The only CSS experience I have is with editing the files already created from the person before (in Dreamweaver).

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Well the issue you are going to have is you will need to add media queries that will alter the css properties. For example, say header has a width of 1000px (which you should actually be using %s and or EMs)

    In your first media query you will specify the minimum screen size for that query will take effect at. Inside the media query you will then change things like the width of your header to say 650px or whatever looks best for your design.

    If you take the time to read about media queries they are not complex at all. Its basically just a new set of CSS properties that take effect at a certain screen size.


    Sent from my iPhone using Tapatalk

  9. #8
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times
    Ok, I will definitely take a look into that.

    Also - I went ahead and worked through the online courses from CodeAcademy, and I cannot thank you (and the website) for that information, it has helped me a LOT so far with terms and procedures and definitely gave me confidence that I can solve these issues.

    I will look into the media queries, and you may or may not hear from me again lol.
    Vapr_Arts likes this.

  10. #9
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Thats good to hear. Don't hesitate to continue asking questions. We are all here to get and give help


    Sent from my iPhone using Tapatalk

  11. #10
    Junior Member
    Join Date
    Apr 2015
    Posts
    6
    Member #
    49427
    Liked
    1 times
    Ok, so I got the Viewport "working". I was able to use HTML coding to add <meta name="viewport" content="width=device-width content="initial-scale=1">
    and this made the viewport work for my site.

    Now I have an issue or 2 as well as a question or 2.

    When I run the Google Mobile Friendly test it still says I do not have a Viewport set, even though I do and it is working now on any phone or device.

    An issue I am having is that 1 of my pages (Contact Us) will not view properly, it still had to scroll on mobile devices as it would without a viewport set. I have tried deleting frames and moving the viewport code to different lines but to no avail.

    Am I missing something here?

    Please let me know if you have any idea why Google says there's no viewport and why the viewport won't work on this page?

    Thanks so much!

    Main site: Granite Countertops Atlanta & Discount Granite Counters - MC Granite Countertops
    Page where viewport won't work: MC Granite Countertops Warehouse | Atlanta Georgia | Kitchen Counters


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com