Non-stacked Media Query Styles

[imsimplyellie]

Hi there,

I am currently working on my Practicum and one of the requirements is to have the page break into 2 columns at 900px. I copied the layout.css file from the boilerplate and replaced all the 767px/768px with 900px/901px but my page is still breaking at 768px. I inspected the page and theres this code here built into the head: 

``/* HubSpot Non-stacked Media Query Styles */

@media (min-width:768px) {

.dnd_area-row-0-vertical-alignment > .row-fluid {

display: -ms-flexbox !important;

-ms-flex-direction: row; display: flex !important;

flex-direction: row;

}

.dnd_area-row-1-vertical-alignment > .row-fluid {

display: -ms-flexbox !important;

-ms-flex-direction: row; display: flex !important;

flex-direction: row;

} 

and so on and so forth. My issue is I can't find where to change that 768px to 901px. I've looked through my stylesheets and when inspecting it doesn't give me a stylesheet name.

Any help would be greatly appreciated!

Thanks.

[imsimplyellie]

Hi @RastaMan! I didn't copy the entire boilerplate - just the layout.css file (they suggested that in the 'Tips' portion of the practicum directions). I've tried putting the code I found in the header into multiple .css areas in my theme and it still wont overwrite the weird built-in MQ codes thats causing the break at 768px instead of the 900px I have in my .css. 

[RastaMan]

Hi @imsimplyellie, did you copy the entire boilerplate as your starting point for the practicum? I think you were supposed to build your project from scratch, but If using the boiler plate, maybe take a look at the theme.json file as there is a media query in there that might be impacting the behavior of your design. Otherwise, try putting the MQ directly in the css section of the module you designed instead. 

-- RM