Hi wdf. Im building my site (gradually) & i have used:

 

html { box-shadow:inset 0 0 40px #000; }

 

But i checked the site on mobile & it messes up. Weirdly appears just in the header section. On bigger screens alls fine. Baffles me. Please help.

 

And incidentally any clue has to how to make the footer stay at the bottom of the screen just like the: Knowledge & Personal tabs?. sections with less content, the footer pops off the bottom.

 

Please help.

 

Thank you

Edited April 20, 201412 yr by MixCreations

You've certainly enjoyed using the shadow, ey?

 

Anyway, what is it you are wanting to conquer, is it just shadow on the bottom of the page?

 

When I view on a mobile device, the shadow is all around the page - same for the desktop view. What browser are you using on your mobile?

haha just experimenting. im wanting the box-shadow to create a vignette effect round the entire page. On my mobile (Samsung S4 Mini) it appears just in the header, not the entire page.

 

But you say its ok on your device!. It renders the same on your mobile the same as it does on your bigger screen!.

 

Im using some fsecure safe browser btw on mobile.

haha just experimenting. im wanting the box-shadow to create a vignette effect round the entire page. On my mobile (Samsung S4 Mini) it appears just in the header, not the entire page.

 

But you say its ok on your device!. It renders the same on your mobile the same as it does on your bigger screen!.

 

Im using some fsecure safe browser btw on mobile.

The browser may be the issue then. I tested on Chrome for mobile and for Desktop - fine on both.

 

It may be worth a try to test it on other browsers on your mobile, just to narrow the problem down. If it's fine on all of them, then the problem will be your browser, if not we can carry on looking.

 

EDIT

 

Just taken a look at your box-shadow in your CSS, you may want to add this to your shadow (for compatibility reasons)

-moz-box-shadow:    inset 0 0 40px #000; /* Firefox, other Gecko */
-webkit-box-shadow: inset 0 0 40px #000; /* Safari/Chrome, other WebKit */
box-shadow:         inset 0 0 40px #000; /* Opera/IE 8+ */

Edited April 20, 201412 yr by Sysode

Paulund has a great article with many examples of box shadows

I am sure you are already aware of it, but the bullet points and content in the Knowledge page have some justification issues that need sorting.

I have a prefix script on my site that automatically deals with all that Sysode. Maybe the fact the site looks ok on your small devices. Might mean its to do with mine. Bit strange though.

Edited April 20, 201412 yr by MixCreations

Yes weedy lol. Ill get that. Thanks for pointing it btw.

Should sandbox it all. But cba.l

I have a prefix script on my site that automatically deals with all that Sysode. Maybe the fact the site looks ok on your small devices. Might mean its to do with mine. Bit strange though.

That could mean you don't have the right break points, or enough break points in your media queries. This Smashing magazine article may be of some help, and so may this ResponsiveDesign.is article

I have fsecure safe browser enabled. I disabled & checked in native browser & chrome for mobile & found works perfect Just like bigger screens. Dont know why this fsecure securiry stops it working. But anyway, now this issues solved. Thanks to all for your input.

 

Dont know how to solve the footer issue. On big screens when i click either twitter, images or tunes tab, the footer jumps up when i reduce browser size. On mobile it stays @ the bottom.

Before playing with the media-queries you should consider some things:

-freelance-Web-Designer2.png is 693kb

-why 22 version.js files?

-Twitter syndication is constantly adding an HTTP request

-jquery and all .js you should use minified versions.

Just a few things to consider because all these create lag on your site/network for just one page ( I see you hide/display content on one single page)

Version.js files?

 

Cant do anything about twitter sorry.

 

i can reduce the image size (somehow).

 

Can use less js i suppose. Always looking @ cleaning the css & js.

 

The reason i use one page is because no need for multiple pages (i feel).

 

I only work on the site now n then. Dont get enough time.

 

Thanks for the consideration.

Ive not used any media queries yet btw. Ill get to that If necessary. Thanks again.

Edited April 21, 201412 yr by MixCreations

you might have a look at layout.css

/*MEDIA QUERIES*/
@media screen and (max-width: 768px) {
	body ,header ,footer {
		width: 768px;
		margin: 0px;
	}
	header {}
	
	#logo { text-align: center; }
	
	section{ 
		margin-left:0;
		margin-top: 20px; 
		padding-right: 0px; 
		padding-left: 0px; 
	}
	nav { line-height: 40px; 
		font-size: 30px; background-image: none;padding-top: 20px;
	}
	
	article { clear:both; }
	footer p{ text-align:left; }
}

Are you using some kind of template/framework? It's just that there seems to be enough CSS to build a huge portal

narr. hand coded. im gonna reduce the css. Forgot about the layout.css tbh. Just something im gradually building. dont get a lot of time due to work & life. not my f/t job you see. thanks.

Edited April 21, 201412 yr by MixCreations

Before playing with the media-queries you should consider some things:

-freelance-Web-Designer2.png is 693kb

-why 22 version.js files?

-Twitter syndication is constantly adding an HTTP request

-jquery and all .js you should use minified versions.

Just a few things to consider because all these create lag on your site/network for just one page ( I see you hide/display content on one single page)

Sorry. what do you mean by 22 version.js files?

narr. hand coded. im gonna reduce the css. Forgot about the layout.css tbh. Just something im gradually building. dont get a lot of time due to work & life. not my f/t job you see. thanks.

No problem, I know what you mean by time

 

 

Sorry. what do you mean by 22 version.js files?

If you use Inspect Element in FF or Chrome you will see that there are 22 files called version.js which creates an overhead of HTTP requests.

Even if it's a hobby site, if you want traffic you need to optimize the code so that it doesn't take too long to load.

Edited April 21, 201412 yr by GroovyMotion

Ok thanks. Thats news to me. Ill check it. WoW 22 files!! Too many eh!

If you use Inspect Element in FF or Chrome you will see that there are 22 files called version.js which creates an overhead of HTTP requests.

Even if it's a hobby site, if you want traffic you need to optimize the code so that it doesn't take too long to load.

 

Im well aquainted with web developer tool in ff & chrome. They are a very handy (important) tool for a developer/designer.

 

This version.js file is new territory. Im on mobile @ the mo. Not sure if i can use samsung s4 mini for this!

If you use Inspect Element in FF or Chrome you will see that there are 22 files called version.js which creates an overhead of HTTP requests.

Even if it's a hobby site, if you want traffic you need to optimize the code so that it doesn't take too long to load.

 

Im well aquainted with web developer tool in ff & chrome. They are a very handy (important) tool for a developer/designer.

 

This version.js file is new territory. Im on mobile @ the mo. Not sure if i can use samsung s4 mini for this!

on a mobile some content might not show up since you have CSS/JS files that may target devices. Also, your meta tag clearly is enabled for devices

A good tip for dev tools in FF/Chrome is the network, you can really see what are the requests and their bottleneck. You will be surprised what it shows!

All your js and css should be concatenated into single files. Reducing http requests will speed up loading times. They should also be minified and gziped.

 

There are loads of other things you can do too but those above should be of primary cconcern.

I thought it was in single files! Not a clue about how to 'gzip' sorry.

 

i just thought as im using html5 i should cut out all unnecessary code. There is loads im gonna gradually change & erase. So i do appreciate all (constructive) critism (feedback).

Edited April 22, 201412 yr by MixCreations

No problem, I know what you mean by time

 

 

If you use Inspect Element in FF or Chrome you will see that there are 22 files called version.js which creates an

overhead of HTTP requests.

 

i cant see owt.

Even if it's a hobby site, if you want traffic you need to optimize the code so that it doesn't take too long to load.

All your js and css should be concatenated into single files. Reducing http requests will speed up loading times. They should also be minified and gziped.

 

There are loads of other things you can do too but those above should be of primary cconcern.

Please tell me what other things?

 

I use Adaptive Images btw