Okay
  Public Ticket #1430997
responsive breakpoint (768px)
Closed

Comments

  •  1
    Eric Finney started the conversation

    Any way to change one of the page-related responsive break-points, currently 768px, to 900px? (the point at which overflowing columns will break into a single column and stack in multiple rows)

    I was able to locate the code “@media (max/min 768px)” in "bootstrap.grid.css" and "screens.css", but editing these values doesn’t appear to do anything.

    I was also able to find the “var responsiveResolution = '1023';” in “header.misc.js” to control the menu break-point in the "framework/js" section, but don’t see anything that controls the page-related break-points in that section.

  •  630
    Support Agent replied

    Hi Eric,

    Could you tell us which columns on the page would you like to edit exactly? Could you send us the link or the screenshot?

    Thanks in advance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  1
    Eric Finney replied

    Sure. Please take a look at http://sac-clinic.hauptcloud.com/ where we have started playing with the demo content sections provided with the theme.

    Scroll down to section 3 where there are four columns in the following color sequence: Green-Orange-Blue-Red

    On desktop, if you adjust the browser width you will notice that the 4th column begins to disappear (overflow from the page) between 900px and 768px  (where the current break-point is assigned). Ideally, id like for the break-point to be at 900px to avoid the content runoff.

    I've tried adding a custom class to the columns ("fourcoulmnbreak")  and applying the custom css below in an attempt to get the columns to stack in two's at the desired 900px. This grabs the elements correctly and does stack the columns in two's after the break-point (instead of the original single-column). However, it continues to break them in two's at 768px.

    @media (min-width: 481px) and (max-width: 900) {
     .fourcolumnbreak {
        width: 50%;
        float: right;
    }
    }
    

     It doesn't appear to matter what you type in for the max-width, I cannot seem to override the specified 768px break-point. 

    Same applies when editing "bootstrap.grid.css" and "screens.css". Inspecting the browser code shows that the specified px's in those stylesheets had been changed, but the break-point remains unaffected.

  •  1
    Eric Finney replied

    FYI, I recognize i am missing "px" after "900" in the css code provided in my last reply. That was a copy and paste error and does not solve the issue when corrected.

    Section in question:

    @media (min-width: 481px) and (max-width: 900px) { .fourcolumnbreak { width: 50%; float: right; } }

    @media (min-width: 481px) and (max-width: 900px) {
     .fourcolumnbreak {
        width: 50%;
        float: right;
    }
    }
    
  •  630
    Support Agent replied

    Hi Eric,

    Thanks for the info.

    We'll have to take a closer look at the issue, and we'll get back to you asap, most likely tomorrow.

    Thank you for understanding.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  1
    Eric Finney replied

    Not a problem. Thank you for looking into it.

  •  630
    Support Agent replied

    Hi Eric,

    Thank you for your patience.

    Here's how we tested this on our site. First we added Custom ID to the section.

    Then, we added Extra Class Name to each of the four columns.

    After that, we added the code below to Custom CSS field in Appearance >Customize >General Settings:

    @media (max-width: 990px) { 
        .my_column { 
            width: 100% !important;
    } 
    } 
    @media (min-width: 768px) { 
        #row_display .btTableRow > .boldRowInner { 
            display: block !important; 
    } 
    }

    Let us know if this helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  1
    Eric Finney replied

    I was able to adjust your CSS to get exactly what I intended, thank you!

    @media (min-width: 768px) and (max-width: 900px) { 
        .my_column { 
            width: 50% !important;
    } 
    } 
    @media (min-width: 768px) and (max-width: 900px) { 
        #row_display .btTableRow > .boldRowInner { 
            display: block !important;
    } 
    }
    

    One more question. Any idea why, when displaying at 50% width (2 columns), the very first element (Green) doesn't always display at the same height as the one next to it? It seems to be the only column that falls out of place/alignment. Does this have to do with the animation properties?

  •  1
    Eric Finney replied

    Nevermind. I was able to fix this issue by making the bottom css-string display inline-block and setting a value for height in the top css-string. i simply set the height to the largest column in the section. (for anyone reading this in the future)

    @media (min-width: 768px) and (max-width: 900px) { 
        .fourcolumnbreak { 
            width: 50% !important; height: 569px;

    }  @media (min-width: 768px) and (max-width: 900px) { 
        #row_display .btTableRow > .boldRowInner { 
            display: inline-block !important;

    }

    You guys can close this one. You have been very helpful! Thank you!!

  •  630
    Support Agent replied

    Hi Eric,

    We are glad you have managed to resolve the issue.

    Please let us know should you need additional assistance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!