0
Welcome Guest! Login
0 items Join Now

Module (custom) not responsive

Last Post
Search Topic

  • Module (custom) not responsive

    Posted 11 years 3 months ago
    • Hi!

      I have a module that works like a dropdown popup box and in the module settings I have to specify the space from the right corner (in px or %). Now I noticed that when I minimize the windows the module does not move with the hole page. It just takes the value that is specified.

      Hopefully I wrote down the problem good enough. Basically I would like to add to the module the option to be responsive.

      You can see it here: www.ikoniks.si/test/prostajo

      It is placed on the top right corner and it says "Kdo ste?"

      Thanks
    • Tilen
    #1060724
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Module (custom) not responsive

    Posted 11 years 3 months ago
    • Do not use inline styling to set the dimensions of that module. instead do it using CSS statements for the relevant class or ID. Then you can also use that CSS inside media queries and use different values dependent upon viewport size.
      /* 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) {
 
}

      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.
    #1060754

  • Re: Module (custom) not responsive

    Posted 11 years 3 months ago
    • But I need to make the value in the module. About the code you posted i have no questions - but i am not sure what you mean with the first advice... You know what i mean?
    • Tilen
    #1060755
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Module (custom) not responsive

    Posted 11 years 3 months ago
    • Sorry I don't understand what you just said - but here's an example of what I mean to alter the size of that module (once opened) to make it fit the viewport better - but it will need a lot more tweaking...
      @media (max-width: 480px) {
#pwebbox163_box {
     height: 280px !important;
     width: 380px !important;
}
}
@media (min-width: 481px) and (max-width: 767px) {
#pwebbox163_box {
     height: 280px !important;
     width: 360px !important;
}
}
@media (min-width: 768px) and (max-width: 959px) {
#pwebbox163_box {
     height: 280px !important;
     width: 600px !important;
}
}
@media (min-width: 960px) and (max-width: 1199px) {
#pwebbox163_box {
     height: 280px !important;
     width: 830px !important;
}
}
@media (min-width: 1200px) {
#pwebbox163_box {
     height: 280px !important;
     width: 1180px !important;
}
}
      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_fracture). 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.
    #1060758

  • Re: Module (custom) not responsive

    Posted 11 years 3 months ago
    • Great, it helps... but how can I define the starting position... you know - I would like to have the right label (kdo ste?) alligned exactly to the width of the page.... but the position is changing....
    • Tilen
    #1060761
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Module (custom) not responsive

    Posted 11 years 3 months ago
    • Whatever extension you are using there has CSS to position that tab Absolute with reference to the browser window - so again you can change that value inside media queries...
      div#pwebbox163 {right: 140px !important;}
      put that in media queries using a different value - but where it will still move around as you change the viewport width as it is being positioned absolute to the window.

      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.
    #1060794

Time to create page: 0.087 seconds