Hey, is it possible to change the existing page breakpoints? I know that its possible to set a custom break point width for the mobile header in the theme options.
I noticed one break point at 1200px, one at 992px and the mobile break point is at 768px. So I would like to change the first two from 1200px and 992px to something different. What would be the best way to achieve what I want? If I just create new @medias, the existing breakpoints would still affect the page, therefore I need to overwrite the existing css in those areas. I tried to place a copy of main.css from the parent theme (in which the @medias are defined) in the same folder structure in the child theme. I thought that would load the file from the child theme instead of the one from the parent theme. Somehow that doesn't work. Do I have to enque it mannually and how do I do that, without still loading the main.css from parent theme?
Thanks for the answer. However, that just adds new Breakpoints and doesn't delete or overrides the existing ones. What I want is basically to change the min-widths of the existing @medias not creating new break points.
P.S: If you're looking for professional help for theme customizations, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Hey, is it possible to change the existing page breakpoints? I know that its possible to set a custom break point width for the mobile header in the theme options.
I noticed one break point at 1200px, one at 992px and the mobile break point is at 768px. So I would like to change the first two from 1200px and 992px to something different. What would be the best way to achieve what I want? If I just create new @medias, the existing breakpoints would still affect the page, therefore I need to overwrite the existing css in those areas. I tried to place a copy of main.css from the parent theme (in which the @medias are defined) in the same folder structure in the child theme. I thought that would load the file from the child theme instead of the one from the parent theme. Somehow that doesn't work. Do I have to enque it mannually and how do I do that, without still loading the main.css from parent theme?
Thanks for your Support!
Hi Julius,
You can create custom Breakpoints, with CSS codes something like this:
/* Body: Large Screens */ @media (min-width: 1400px) { .container, .content-area { width: 1370px; max-width: 1370px; } .vc-container .vc-parent-row.row-stretch_row>.vc_row, .vc-container .vc-parent-row.row-default { width: 1370px; max-width: 1370px; } .woocommerce .products.columns-3 .product { width: 33.3%; } } /* Body: Large Screens */ @media (min-width: 1600px) { .container, .content-area { width: 1570px; max-width: 1570px; } .vc-container .vc-parent-row.row-stretch_row>.vc_row, .vc-container .vc-parent-row.row-default { width: 1570px; max-width: 1570px; } .woocommerce .products.columns-3 .product { width: 33.3%; } }P.S: You can apply the CSS code in the Custom CSS area of the theme (more info).
Have a nice day!
Thanks for the answer. However, that just adds new Breakpoints and doesn't delete or overrides the existing ones. What I want is basically to change the min-widths of the existing @medias not creating new break points.
Hi Julius,
Those are the default Bootstrap 3 breakpoints.
// Medium devices (tablets, 768px and up) @media (min-width: 768px) { } // Large devices (desktops, 992px and up) @media (min-width: 992px) { } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { }More info: https://getbootstrap.com/docs/3.4/css/#grid
P.S: If you're looking for professional help for theme customizations, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Have a nice day!