Media Query Stylesheet

Quote

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. ;)

coolpenguin
New member
Posts
46
Joined
Tue Jul 26, 2011 8:40 pm
Top

Re: Media Query Stylesheet

Quote

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

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer

User avatar
Xyph3r
Active Member
Posts
1312
Joined
Sun Feb 10, 2013 1:08 am
Top

Re: Media Query Stylesheet

Quote

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. ;)

coolpenguin
New member
Posts
46
Joined
Tue Jul 26, 2011 8:40 pm
Top

Re: Media Query Stylesheet

Quote

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" />

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer

User avatar
Xyph3r
Active Member
Posts
1312
Joined
Sun Feb 10, 2013 1:08 am
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 4 guests