Media Query Stylesheet

New member

Posts

Joined

Tue Jul 26, 2011 8:40 pm

Post by coolpenguin » Fri Jan 24, 2014 7:42 am

Hi everyone,

I am trying to implement different stylesheets so I can alter the layout for different devices. I want to succeed with using the following code:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

However I do not know how I can implement this is in my header.tpl file. Can anyone help me with this?

Cheers,

coolpenguin

My fantasy miniature parts shop: www.warhammerbits.nl. I would appreciate feedback.

New member

Posts

Joined

Tue Jul 26, 2011 8:40 pm

Re: Media Query Stylesheet

Active Member

Posts

Opencart Templates, Modules, Themes & Custom Development | ShopThemer

Joined

Sun Feb 10, 2013 1:08 am

Post by Xyph3r » Fri Jan 24, 2014 9:26 am

you just copy the stylesheet in the <head></head> tag...preferably just before your default stylesheet

Active Member

Posts

Joined

Sun Feb 10, 2013 1:08 am

Re: Media Query Stylesheet

New member

Posts

Joined

Tue Jul 26, 2011 8:40 pm

Post by coolpenguin » Fri Jan 24, 2014 9:18 pm

Xyph3r wrote:you just copy the stylesheet in the <head></head> tag...preferably just before your default stylesheet

Thank you very much for your response. I have tried pasting the code above the first <link rel.... /> together with the following meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Unfortunately this diddn't work.

Furthermore I tried adding a media query inside my existing stylesheet, on the end to overwrite the previous css:

Code: Select all

/* mobile */
@media only screen and (max-device-width: 480px) {
body {
       background-color: black;
}
}

But this also diddnt work, I also deleted the cache of the smartphone. What am I doing wrong?

Kind regards,

Coolpenguin

My fantasy miniature parts shop: www.warhammerbits.nl. I would appreciate feedback.

New member

Posts

Joined

Tue Jul 26, 2011 8:40 pm

Re: Media Query Stylesheet

Active Member

Posts

Opencart Templates, Modules, Themes & Custom Development | ShopThemer

Joined

Sun Feb 10, 2013 1:08 am

Post by Xyph3r » Sat Jan 25, 2014 12:15 am

copy this in header..above the stylesheets

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

and put this in your stylesheet

Code: Select all

@media only screen and (max-width:480px){
background-color: black;
}

or under the main stylesheet

Code: Select all

<link rel="stylesheet" media="(max-width: 480px)" href="example.css" />

Active Member

Posts