Jump to content

Archived

This topic is now archived and is closed to further replies.

tikawawa

Responsive setting issues

Recommended Posts

tikawawa

I can't seem to figure this out... I am trying to get more control on column sections when making my site responsive. I am using the @media query to hide some columns below a certain width with not problems but there seems to be some back end code That I can't find or reach. I tried looking in this file but it is not helping dms/less/responsive.less.

 

I set my site to pixel based because the revslider was messing up. What I am noticing is I have no control when some columns jump below the columns before them and take up full width of the browser. Where is this setting? I am also noticing that the number of columns goes from 12 at full width to 9 and then 6 as I reduce the width. Where are these settings and how do you control them. 

 

Please Help

Share this post


Link to post
Share on other sites
James B

Hi there, you're not meant to change the values inside of that file, just copy to media queries into your child themes style.css or the custom code panel inside the DMS editor. If make the changes directly in the core files it will get wiped out on updating.

 

What is the code snippet you've made changes to?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
tikawawa

All the changes that I have made I returned to what they were, I would test out the code in those files and if the code worked I would write the code in the custom css section in DMS. 

 

here is some of the code that I have been using.

 

@media (min-width:500px) and (max-width:900px) {
  
   //set left column width
  .left-col-width {
  min-width:30%;
    //float:left;
  display: inline;
  }
  //set right column width
  .right-col-width {
  min-width: 65%;
  display: inline;
  }
    // hide eleements below a certain width
  .sizing-hide{
  display:none;
  }
  
 
 /* I found this code in the responsive.less file and thought to test, it did not work
  .visible-tablet    { display: none; }
  // Hide
  .hidden-tablet     { display: block; }
  // Hide everything else
  .hidden-desktop    { display: none; }
  .visible-desktop   { display: block; }
 */
 
}
 
Thanks for the help

Share this post


Link to post
Share on other sites
Danny

HI,

 

The visible-tablet, hidden-tablet etc.. only work on sections areas and will not work on individual sections. So if you want to hide specific columns, you will need to use @Media queries and custom CSS, targeting that sections or the columns, you can use the styling classes field option to give that section/column a unique class which you can target in your media queries.

 

Please bear in mind we do not provide extensive CSS/LESS support and also, users who have made changes to the core files are void of support.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tikawawa

Hi Danny,

 

Thanks for your reply, I am doing exactly what you said, I applied a custom css to the columns so am reducing the left column size and increasing the center column size and hiding the right column. But there seems to be something that is overriding my @media settings, where is that?

 

I am good with the CSS, there are a lot of resources online. Also, I am not modifying the core files because any changes will be overwritten with the next update. I add all my code in the designated areas for it.

 

What I would like to know is, how to disable the default responsive CSS so I can make my own. The whole point of pagelines is that it is very customizable, I could set widgets and sections wherever I want and apply my custom css to them. so why can't I customize my responsive settings? That is contradictory, don't you think. Because it is unrealistic to think that the default responsiveness settings will work for everybody, especially for your customers who are making custom websites.

 

I really appreciate your help and pagelines has made my life a lot easier, Thanks in advance.

Share this post


Link to post
Share on other sites
Danny

OK, what you will want to do is, use a child theme and then in that child themes directory, create a less folder and add any less files you wish to overwrite. Then make your changes in there, this will overwrite the default responsive less.

 

One of our store developers created a developer ready child theme which is probably what you will want to use, as it already has a less and sections directory - https://github.com/bearded-avenger/nicks-base-theme


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tikawawa

Thanks a lot Danny, I will try that and let you know, how I come along.

Share this post


Link to post
Share on other sites
tikawawa

Followed the instructions in the post on creating a child theme and here is where I am so far.

 

1- I created a child theme with the link that you gave me from Nicks' child theme. However, code added to the style.css file works except that it does accept @media commands, not sure why, it works fine with classes though. So I put the @media code above in the Custom CSS in pagelines, and that works, fine 

 

2- I then I made a copy of all the files that are in the dms/less folder to the nicks-base-theme-master/less folder

 

3- Then I modified the copied files in the child theme folder. Here are all the modifications I did to the files in nicks-base-theme-master/less folder 

 

- variables.less,  I modified the @resPortraitTablet: 767px value to 267

- Responisive.less, I modified all the @media 767px values to 267px

 

After all that it still does not work to get rid of the default responsiveness. 

Share this post


Link to post
Share on other sites
tikawawa

Actually, I think it worked, It just needed some time for the server to update the files,

 

But there is still the issue of the @media commands in the style.css file.

 

Thanks a Bunch!!!

Share this post


Link to post
Share on other sites
Danny

What media queries are you using can you post them here please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×