0
Welcome Guest! Login
0 items Join Now

SOLVED Per device custom CSS

Last Post
Search Topic
    • mustafa_s's Avatar
    • mustafa_s
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    SOLVED Per device custom CSS

    Posted 8 years 8 months ago
    • Hello,

      I have the following code in my rt_audacity-custom.css file which works fine, I can see the overried apply on front-end:
      div#g-recaptcha {
    margin-left: 74px;
}

.recaptcha {
    padding-left: 103px;
}

      However this applies to all devices (mobiles, tablets and desktops). How can I ensure this does not apply to mobiles and tablets but only to desktop?

      I tried the following but the mobile/tablet view didn't change and kept the overrides from the previous custom css:
      // Mobile Modes
@media (max-width: 767px) {
	div#g-recaptcha {
    margin-left: 0px;
	}
}

// Mobile Modes
@media (max-width: 767px) {
	.recaptcha {
    padding-left: 0px;
	}
}

      Thanks.
    • Last Edit: 8 years 8 months ago by mustafa_s.
    #1309023
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Per device custom CSS

    Posted 8 years 8 months ago
    • Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1309063
    • mustafa_s's Avatar
    • mustafa_s
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    Re: SOLVED Per device custom CSS

    Posted 8 years 8 months ago
    • Sure thing, the URL is in the secure area.
    #1309100
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Per device custom CSS

    Posted 8 years 8 months ago
    • At the moment you have CSS that is setting those values for recaptcha in all screen sizes. I don't see any use of the alternate media query based CSS for that? So, what you should be doing is removing that custom CSS and then using all the media queries - then putting your CSS into each media query with different values (appropriate to the viewport).
      /* Smartphones */
@media (max-width: 480px) {

}
 
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
 
}

/* Tablets */
 @media (min-width: 768px) and (max-width: 959px) {

}
   
/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) {
   
}
    
/* Large Display */
@media (min-width: 1200px) {
    
}

      Media queries work like this:

      if the viewport size is xxxxx then
      use this css
      endif

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1309103
    • mustafa_s's Avatar
    • mustafa_s
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    Re: SOLVED Per device custom CSS

    Posted 8 years 8 months ago
    • The custom CSS worked once I included the Desktop and Large Display media queries, thank you.
    #1309105

Time to create page: 0.078 seconds