Responsive Classes for only visible on desktop
-
-
- Paul M30
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
The function Responsive Classes only lets me show on desktops 960px AND 1200px (visible-desktop). I only what to show something on 960px.
What I want it for is Adsense. I want to show a different AD size on every breakdown. But with the standard functionality it shows two ads when at 1200px.
Is there a possibility to show only on 960px?
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- Paul M30
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
The site isn't online
. But I don't think thats necessery. Look at option 3 in the image I posted (visible-desktop), there is desktop 960 AND 1200 visible. I want only desktop 960 to be visible.
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
okay I see what you are thinking.
you can create your own class for this like visible-960only
add this to your custom css file:If you are using Gantry 4 (or later) you can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_kirigami-custom.css or gantry-custom.css)..visible-960only {display: none !important;} @media only screen and (min-width: 960px) and (max-width: 960px) { body .visible-960only {display: inline-block !important;} }
OKAY NOW that I showed you how to do it I should tell you that this is not going to work well as a solution. Because it will only show when the screen size is exactly 960px wide. That is why the current range. You can however play with the min and max widths to get closer to what you want. -
The following users have thanked you: Ruy Gonzalo Martinez Allende
-
-
-
- Paul M30
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
Desktop only is 960 to 1199, desktop large is 1200 +. Than I should look like this:
.visible-960only {display: none !important;} @media only screen and (min-width: 960px) and (max-width: 1199px) { body .visible-960only {display: inline-block !important;} }
So I put the above tekst in a new file called templatefolder-custom.css, because I use Gantry 4. Where do I put it? I use template Chapelco. -
The following users have thanked you: Ruy Gonzalo Martinez Allende
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
1) If you are going to have it be 960 - 1199 just user the module class suffixes visible-desktop hidden-large
2) for the custom css file it needs to be in the css folder of the template that you are using.
more info here: www.gantry-framework.org/documentation/j...custom_stylesheet.md
-
-
-
- Paul M30
- Jr. Rocketeer
- Posts: 20
- Thanks: 1
-
cdavis411 wrote:
1) If you are going to have it be 960 - 1199 just user the module class suffixes visible-desktop hidden-large
Ok, you say thats an option? I tried that allready, but that doesn't work. Then it's shown in every breakdown. As if the both classes visible-desktop and hidden-large are ignored.
Are you sure that works?
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
okay I see what you are referring to now. it is the inherit property that is causing that,
just add this to your custom css file:If you are using Gantry 4 (or later) you can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_kirigami-custom.css or gantry-custom.css).@media only screen and (min-width: 1200px){ .visible-desktop.hidden-large {display: none !important;} }
-
Time to create page: 0.057 seconds