Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

I currently have my LMS set up with Moodle 4 and the boost theme which is based on bootstrap (github)

However, the default page layout appears very narrow on all devices and I would like to utilize the responsive design features of Bootstrap for different screen sizes (.container)

I attempted to adjust the page width using raw SCSS code in the custom CSS field as shown below:

/* Page Width */
@media screen and (max-width: 575px) { $course-content-maxwidth: 100% !default; }
@media screen and (min-width: 576px) and (max-width: 767px) { $course-content-maxwidth: 540px !default; }
@media screen and (min-width: 768px) and (max-width: 991px) { $course-content-maxwidth: 720px !default; }
@media screen and (min-width: 992px) and (max-width: 1199px) { $course-content-maxwidth: 960px !default; }
@media screen and (min-width: 1200px) and (max-width: 1399px) { $course-content-maxwidth: 1140px !default; }
@media screen and (min-width: 1400px) { $course-content-maxwidth: 1320px !default; }

Using either

$course-content-maxwidth: 100% !default;

or

$course-content-maxwidth: 1320px !default;

works individually, but not in combination with the media queries above.

Any suggestions on how I can make them work together effectively?

csstwitter-bootstrapsassmedia-queriesmoodle

Answer №1

Oops, I made an error with the variable. Using classes seems to do the trick:

/* Adjusting Page Width */
@media screen and (min-width: 576px) and (max-width: 767px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 540px; }}
@media screen and (min-width: 768px) and (max-width: 991px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 720px; } }
@media screen and (min-width: 992px) and (max-width: 1199px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 960px; } }
@media screen and (min-width: 1200px) and (max-width: 1399px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1140px; } }
@media screen and (min-width: 1400px) { .pagelayout-standard #page.drawers .main-inner, body.limitedwidth #page.drawers .main-inner { max-width: 1320px; } }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

javascripthtmlcss

Clear all CSS styles applied to a targeted division

My website built on Wordpress links to several CSS files. One specific div has its own unique style that is separate from the main Wordpress styles. Unfortunately, the Wordpress CSS ends up interfering with my custom div's layout. Is there a way in HT ...

javascripthtmlcssstylesreset

"Defining a CSS class specifically for styling the span element nested within an

The HTML structure I am working with is as follows: <p> <a href="#"> <span class = "class-for-span"> SOME TEXT HERE </span> </a> </p> Along with the following CSS: p a{ color: grey; text-decora ...

htmlcsscss-selectors

Need help styling a CSS for an iFrame on the same domain as my website?

After doing some research and browsing through Stack Overflow questions, I've discovered that even if you don't have access to the iFrame's stylesheet, you can still make edits as long as it resides in the same domain as your webpage where y ...

htmlcssiframe

Create dynamic modals in ReactJS that appear when a row is clicked

Engaged in a project for an undisclosed entity where patient data is retrieved from their API and displayed as modal on the page. Clicking on a modal reveals more threat information in another modal. The objective is for these modals to render based on a c ...

cssreactjstypescript

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure. Here is the template section of my Vue file. Some data ...

cssvue.jsvuetifyjs3

Concealing specific DIV elements (unfortunately not nested)

Currently, I am dealing with pre-existing code that is automatically generated and needs to adhere to a specific format: <div id="TITLE1"></div> <div id="div-1"></div> <div id="div-2"></div> <div id="div-3"></d ...

javascriptjquerycsshtml

"Enhancing webpage dynamics with jQuery: Exploring the

I have a beginner's question regarding my jQuery script. The script I have makes the menu move slightly to the right. My first issue is that the <a> tag seems to be receiving bottom padding, and I am unsure why or how this is happening. My secon ...

jqueryhtmlcssmenu

What is the method for adjusting the input text color in a textarea to green?

Is there a way to change the input color for this textarea so I can type green text on a black background? textarea{ background-color: black; } <textarea id="htmlCode" class="1111" placeholder="HTML"></textarea> ...

htmlcssweb

The layout consists of two divs: one with a fixed height, while the other dynamically adjusts to occupy the

I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...

htmlcss

Centered alignment with floating divs of abbreviated length

My HTML file has a structure similar to the following: <div style="float:right"> A line of text, floating to the right </div> <div style="text-align:center"> And here, several lines of<br /> text which should be centered. </div& ...

htmlcss

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

I've run into an issue trying to incorporate LocalStorage with the buttons that change colors as themes in JavaScript. I'm new to coding and eager to add this feature to my personal blog. $(document).ready(function () { $(".header--theme-button ...

javascripthtmlcsslocal-storage

Unable to adjust the dimensions of a Mailchimp input field

Having some trouble customizing my Mailchimp form a bit and could use some assistance. Snippet of the code: <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type=" ...

cssmailchimpsubscription

What is the method for eliminating the box shadow on a table?

Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...

htmlcssangularjsngtable

Hover effect not displaying upon mouse exit

I am working on a feature where a series of images change when hovered over, with a div animating as an overlay on the image. Here is the code snippet: // hiding overlays initially $(".mini-shop .item .image a div").hide(); // toggling overlay and second ...

javascriptjqueryhtmlcss

How can I make an element stick at the bottom of another element using the top position

I have two stacking elements of varying heights within a scrolling container. When the lower element extends below the bottom of the container, I want to display a part of it affixed to the bottom. To achieve this, I applied position: sticky to position ...

htmlcsscss-positionsticky

Ways to eliminate a bootstrap modal that has been added using jQuery?

After realizing I needed a script to dynamically insert custom Bootstrap modals instead of having empty static modal HTML on every page, I created a solution. I defined a variable for the modal 'shell' HTML and appended it to the body when clicki ...

jquerytwitter-bootstrap

Styling with CSS in Angular 2+ can be quite challenging

Hey there, I'm new to Angular 4 and running into some troubles with styling my application. I tried adding a background image to the body, which worked fine, and then added a component to display content, also looking good. Now, when I added a second ...

cssangulartypescriptangular2-routing

Is there a way to alter the color of radio buttons?

Is there a way to use CSS to change the background color of a radio button? I've searched online, but all the solutions I found involve JavaScript, which I don't fully understand. I attempted this CSS code, but it didn't have the desired eff ...

htmlcss

Show blank value if there are no search results, along with an additional menu option

I am currently working on a Typeahead feature with a customized menu using the renderMenu method. In this setup, I have added 2 custom menu items at the bottom - one divider and a button. An issue arises when there are no search results. If I do not inclu ...

javascriptreactjstypescripttwitter-bootstrapreact-bootstrap-typeahead