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
you just copy the stylesheet in the <head></head> tag...preferably just before your default stylesheet
Opencart Templates, Modules, Themes & Custom Development | ShopThemer
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">Xyph3r wrote:you just copy the stylesheet in the <head></head> tag...preferably just before your default stylesheet
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;
}
}
Kind regards,
Coolpenguin
My fantasy miniature parts shop: www.warhammerbits.nl. I would appreciate feedback.
copy this in header..above the stylesheets
and put this in your stylesheet
or under the main stylesheet
Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
Code: Select all
@media only screen and (max-width:480px){
background-color: black;
}
Code: Select all
<link rel="stylesheet" media="(max-width: 480px)" href="example.css" />
Opencart Templates, Modules, Themes & Custom Development | ShopThemer
Who is online
Users browsing this forum: No registered users and 64 guests