@ Media CSS questions

[dannodzines]

I am trying to make a website mobile that appears the same on the computer as it does on your phone. The website is http://showdown.dannodzines.com. I am looking to add the @ media and set each of the screen ranges to appear the same as the desktop site would. I have a couple questions that I would like to ask so I can do this properly.

1) When I do the @ media screen and (min width: xxxpx) and (max width: xxxpx) do I need to copy and paste all the other elements from the CSS into them to make it work and if so, how do I do this?

2) Is there a way to lump all the different screen sizes into one area to limit the lines and the amount of typing or copying that I would need to do?

3) Is there a delay when saving it to the server and then refreshing on the mobile device compared to the instant change that you get from the desktop model.

All assistance is greatly appreciated and if you have a reply to this post, please provide a solution that I can try and make this go smoother. I am on a time crunch and a lot of the articles that I have read on the internet are not that helpful. Thanks to all in advance.

[Shikkediel]

Usually one would only apply media queries sparsely, to make small adjustments based on screen size. They may not be needed at all, if not for specific breaking points.

Caching normally applies to live web pages, a double refresh or a CTRL+F5 should serve the latest files on the visitor’s end. Doesn’t look like you’re using a CMS or anything (that could also be caching server side) so that ought to work.

[Atelierbram]

@dannodzines

Responsive webdesign using media-queries requires a dedicated effort from anyone – to understand and apply- so if you are in a hurry, maybe go with adding containers with a set max-width.

Like @shikkediel wrote in the other thread, there are quite a few errors in the HTML-markup as well which can definitely trip you up.

Cleaned it up a bit, and added max-with containers:

http://codepen.io/atelierbram/pen/QdOxGz

[dannodzines]

Stupid question, the comments that were added to the CSS are suggestions for the actual CSS or is it for the mobile portion of the project? I appreciate the help. This means a lot to me and the organization that I am assisting in the matter.

[Atelierbram]

So I out-commented some of the original property-value pairs, sometimes just because the styles had been “moved” (to the new parent container for example). But those can all safely be removed, I just kept them in to give some kind of visual clue of “what has changed”.

So since there were no media-queries used in the CSS, all styles apply to all screens.

P.S. I did use a different webfont only to make it work on Codepen: cross-domain issue, better keep the ones you have.

[dannodzines]

I am making the changes now. I did like some of the font changes though, so I may keep them anyways. I appreciate the help. This is a worthy cause I am helping with and if I knew there was this much involved I may have used wordpress and some of the plugins that they have lol. Thank you so much.

[Atelierbram]

Glad to be of help. When you’re done, or find you hit a wall, please share again what you have over here, so we can see if there can be improvements made.

P.S. WordPress will add an extra layer of functionality and thus complexity, but will not necessarily make life easier for a beginner. Even with plugins that promise the world to you like “no coding-skills required”.

[dannodzines]

So I made the changes that you recommended and now when I log onto the site through my cellphone it redirects me to the primary domain that I have called DannoDzines. Is there a small delay between it, or is it because of the script that I had on it there is no hope? Please help me a little more. Almost there. I appreciate you letting me bug the daylights out of you to get this project done.

[Atelierbram]

Just checked it on my old phone, and it works. I see you removed the JavaScript snippet, so yes, maybe it was because of that.

There is 2 more errors checking the source-code in W3-validator.

<meta name="DannoDzines, Bowlers Against Depression, David Mason, Christopher Wright">

should probably be

<meta name="keywords" content="DannoDzines, Bowlers Against Depression, David Mason, Christopher Wright">

And the align attribute on the H1 should be removed.

[Author]

Posts