The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Losing left side of page on mobile devices Help Please
DWhitfield
post Sep 1 2018, 09:56 PM
Post #1





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



Hello

I am not an expert coder, I know enough to be dangerous. That being said, I am working on a new web site and have issues. Using JS

I have checked the site on three different computers and it looks just fine and all centering is for the most part good, but when I view on
my Lenovo Tab 4 8 or my Android phone, or my sons phone I lose the left hand side of the pages. Like I said, not an expert coder but I thought
the pages down sized to fit the device they were being viewed on?

What am I doing wrong? Thanks for any help in advance.

I have a working copy at http://etaim.com/ None of the links are functional yet, still working on the main page and wanted it correct before I continue
making the same mistakes.

Tks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 2 2018, 12:45 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



When I make the browser window narrower, I don't lose the left side of the page, But I do have to scroll to see the right side of the page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 2 2018, 01:36 AM
Post #3





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



QUOTE(Darin McGrew @ Sep 2 2018, 12:45 AM) *

When I make the browser window narrower, I don't lose the left side of the page, But I do have to scroll to see the right side of the page.


Problem is it won't allow me to move the screen or resize it (on tab or phone) - Looks correct on laptops. Also have an issue with timing on sliding pictures but I will deal with that one once I have all on screen LOL
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 2 2018, 05:14 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



I don't have time to check the code right now, but it's good practice for mobiles to add this in the HEAD section:

CODE
<meta name="viewport" content="width=device-width">


Mobile screens generally have two problems: first, if the whole page is displayed, the content often becomes too small; second, if you zoom in the page you can't view all of it and may have to slide/scroll it around. One solution to this is to make the page layout fluid, that way it will rearrange itself to fit the viewport width, and the user just needs to scroll down, not sideways.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 2 2018, 07:12 AM
Post #5





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



QUOTE(Christian J @ Sep 2 2018, 05:14 AM) *

I don't have time to check the code right now, but it's good practice for mobiles to add this in the HEAD section:

CODE
<meta name="viewport" content="width=device-width">


Mobile screens generally have two problems: first, if the whole page is displayed, the content often becomes too small; second, if you zoom in the page you can't view all of it and may have to slide/scroll it around. One solution to this is to make the page layout fluid, that way it will rearrange itself to fit the viewport width, and the user just needs to scroll down, not sideways.


Thank you, I will try that and let you know
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 2 2018, 09:19 AM
Post #6





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



QUOTE(Christian J @ Sep 2 2018, 05:14 AM) *

I don't have time to check the code right now, but it's good practice for mobiles to add this in the HEAD section:

CODE
<meta name="viewport" content="width=device-width">


Mobile screens generally have two problems: first, if the whole page is displayed, the content often becomes too small; second, if you zoom in the page you can't view all of it and may have to slide/scroll it around. One solution to this is to make the page layout fluid, that way it will rearrange itself to fit the viewport width, and the user just needs to scroll down, not sideways.


Good Morning

I added the meta to the code but it didn't change anything. I am not good at using style sheets but I think that may be where my issue lies? I haven't edited any code in about 8 or 9 years and I wasn't that good then so I got a free web template to start with. I sized my background image to the size that the template was using and then renamed the old background image and named mine bg.jpg (original template name).

I have to get ready for work so I will look at it again this evening. Any more thought would be a great help. I have been trying to make this work for three or four days now and just can't seem to find it but I need this to work on the tab because I will be taking that with me on jobs. Tks

Doug
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 2 2018, 03:35 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



You might look into CSS media queries. Using them, you can use completely different styling (say a single column layout) for smaller screens.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 3 2018, 06:38 AM
Post #8





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



QUOTE(Christian J @ Sep 2 2018, 03:35 PM) *

You might look into CSS media queries. Using them, you can use completely different styling (say a single column layout) for smaller screens.


Hmm I will look into it but will take some figuring out. I haven't coded for a long time and was only good enough to be dangerous then LOL.

I could usually make things work (for the most part) but most of the time wasn't correct code.

Off work tomorrow and the next day and I will be working on it.

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 5 2018, 09:06 PM
Post #9





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



QUOTE(Christian J @ Sep 2 2018, 03:35 PM) *

You might look into CSS media queries. Using them, you can use completely different styling (say a single column layout) for smaller screens.

I am certain you are correct about the CSS media queries and I have been trying for a couple days but still no luck. I have never edited CSS before and I am not sure exactly where in the sheet I need to place it or the correct way it should be typed. I have found quite a few examples on the web some with / and some with // others with * I am not sure if this are placed there to not make the code work so people can read it or if they are part of the actual CSS

I have been trying to add this

# Phone
only screen and (max-width:720px)

# Tablet
only screen and (max-width:720px)

Does something go in front of or after these? Sorry to be so dumb on this but I only code as a hobby and I have way to many hobbies so can't spend a lot of time with any of them LOL

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 6 2018, 05:49 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(DWhitfield @ Sep 6 2018, 04:06 AM) *

I have never edited CSS before

That's a complication, since your page layout is almost entirely CSS-based.

QUOTE
and I am not sure exactly where in the sheet I need to place it or the correct way it should be typed.

Here's a simple example: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

QUOTE
I have found quite a few examples on the web some with / and some with // others with *

Those characters are sometimes used for comments in the CSS code. Valid CSS comments may look like this:

CODE
/* comment text goes here */

they can also span multiple lines:

CODE
/*
comment text
goes here
*/

Double slash comments like this:

CODE
// comment text goes here, on a single line only

are not valid CSS (though some browsers may allow it?), so it's best to avoid them in CSS code.

QUOTE
Sorry to be so dumb on this but I only code as a hobby and I have way to many hobbies so can't spend a lot of time with any of them LOL

Nothing dumb about that, but you do need to spend some time studying it to make it do what you want. You could always settle for a simpler page layout (even in desktop browsers) and remove any unnecessary bells and whistles (like image slideshows).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 6 2018, 03:10 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Sep 6 2018, 12:49 PM) *


CODE
// comment text goes here, on a single line only

are not valid CSS (though some browsers may allow it?), so it's best to avoid them in CSS code.


I don't think so. If it isn't something new. Can't keep up with the silliness anymore.

Just wanted to say the the comments in your example aren't valid either, DWhitfield

QUOTE
I have been trying to add this

CODE
# Phone
only screen and (max-width:720px)

# Tablet
only screen and (max-width:720px)



Hash signs are used for comments in some programming languages, for example Perl.

CODE
# # # # # # # # # # # # # # # # # # # #
# It's my favourite comment character #
# because it stands out so well and   #
# you can easily create fancy comment #
# blocks like this.                   #
# # # # # # # # # # # # # # # # # # # #


In CSS the style sheet typically isn't read after something like an illegal comment. It isn't like in HTML when both comment and illegal comment characters would just be printed on screen like any other characters and thus is easily detected.

The CSS checker points out mistakes like this.
https://jigsaw.w3.org/css-validator/

If you click on direct input and type
CODE
#illegal comment


it will tell you this.
CODE
0         Parse Error Lexical error at line 1, column 2. Encountered: " " (32), after : "#"


When it says Parse Error it's something serious that basically means the style sheet won't be read after that point.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 6 2018, 11:06 PM
Post #12





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705



[quote name='pandy' date='Sep 6 2018, 03:10 PM' post='136160']
[quote name='Christian J' post='136157' date='Sep 6 2018, 12:49 PM']

The CSS checker points out mistakes like this.
https://jigsaw.w3.org/css-validator/

[/quote]

Thank you, that was very helpful. At least now the CSS is correct. I tried entering the @media
code and it showed up as correct, but then it shows me errors further down in the code. Gotta
work again tomorrow morning so giving up for tonight. I will figure it out or scrap this page and just create one
that is only html. Really wanted to use this template but I believe it take someone with more skills than I
to pull it off. Just not enough time to figure this out.

Tks again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DWhitfield
post Sep 6 2018, 11:09 PM
Post #13





Group: Members
Posts: 8
Joined: 1-September 18
Member No.: 26,705




[quote]Sorry to be so dumb on this but I only code as a hobby and I have way to many hobbies so can't spend a lot of time with any of them LOL[/quote]
Nothing dumb about that, but you do need to spend some time studying it to make it do what you want. You could always settle for a simpler page layout (even in desktop browsers) and remove any unnecessary bells and whistles (like image slideshows).
[/quote]

Thank you, that also was very helpful.

I will get it because I really liked the over all look of this template. It may have to wait until next Monday when I am off work again.

Tks again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 06:46 AM