The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Christian J
post Sep 2 2018, 03:35 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,068
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 5 2018, 09:06 PM
Post #3





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 #4


.
********

Group: WDG Moderators
Posts: 8,068
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
DWhitfield
post Sep 6 2018, 11:09 PM
Post #5





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

Posts in this topic


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: 21st March 2019 - 12:24 AM