Use child theme mobile and tablet stylesheets

Latest Reply from Grace at 2016-05-18 03:35:09
I created a child theme based on your Middle Earth theme. As usual I created my own style.css, but if I copy mobile.css and tablet.css in a css folder of my child theme, they are not used because you explicitely add the following links

<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/mobile.css" type="text/css" media="screen and (min-width:240px) and (max-width:639px)" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/css/tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" />


in library.php. How can I force to use child theme stylesheets for mobile and tablets rather than yours?
Hi!

You can change styles of the mobile and the tablet versions by using media queries in the style.css file. The description of using media queries can be found by following this link:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries


Besides, you can see an example of using media queries on the 450th line of the style.css file.
OK. Just consider that the slides on top of your theme are not really responsive. You can check that by opening your demo site at full screen on a desktop. Then shrink the width of the browser window to the minimum size, and then enlarge it again at full screen. Whereas most of layout will adapt, the image inside the slide get cropped.

Hi!

We know about this specific characteristic. It happens because sliders load and adapt to a screen of your device only once when page loads.

Leave a reply

Add codeAdd image