Making Adjustments to the Padding of Main Content Column in Typo3 Using Bootstrap Package

As the administrator of our local sports club's homepage, I oversee svwalddorf.de, powered by typo3 10.4.22 with bootstrap package 11.0.3.

The current bootstrap template creates excessive empty space around the centered content area as shown here. This layout is aesthetically pleasing but not efficient in utilizing space for content.

To optimize the space for content, I aim to adjust the padding areas (highlighted in red) within the CSS files. While the grey carousel element spans the entire width at the top, I am uncertain which line to modify.

If anyone could provide guidance on locating the correct line in the CSS file, it would be greatly appreciated!

Thank you in advance for your assistance!

cssbootstrap-4typo3padding

Answer №1

In SCSS, there exists a map that outlines the maximum widths of containers for different breakpoints set in the $grid-breakpoints variable. These values can be customized using TypoScript as shown below:

plugin.bootstrap_package.settings.scss {
   container-max-widths= (  sm: 540px,  md: 720px,  lg: 960px,  xl: 1140px,  xxl: 1320px)
}

The $grid-breakpoints variable establishes the breakpoints and their corresponding widths:

$grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px,  xxl: 1400px )

If you wish to increase the container size, you have two options. One is to directly set the max-width property on the container class, like so:

.container { max-width: 80%; }

I recommend updating the values in the container-max-widths map to define different maximum widths for each breakpoint:

container-max-widths= (  sm: 540px,  md: 720px,  lg: 992px,  xl: 1200px,  xxl: 1400px)

Take a look at these resources:

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

The background of the section does not extend to the full height

Currently, I am using the <section> tag as a background for a specific section on my website. However, I am facing an issue where the height of the background is being cut off, even though the content continues below it. I have attempted various pos ...

htmlcss

Updating the font style in MUI with React 18

I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...

cssreactjsmaterial-uifont-family

Positioning two buttons with one on the left and the other on the right

I am currently looking to add an ADD button next to the VIEW button in this layout. An example of what I am trying to achieve can be seen at where you can click on the GRID VIEW icon. <div class="desktop_view product-view grid-list-row-view hide" sty ...

css

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Incorporate dynamic body color changes across all pages using AngularJS

On the home page, I want to change the color scheme so that it is consistent across all pages. The user should be able to choose a color from a list on the home page and have it apply to every page. Currently, the color selection only applies to the home p ...

htmlcssangularjs

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

javascriptjqueryhtmlcsshidden

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

cssreactjsmaterial-ui

Concealed text hidden beneath a Sticky Navigation Bar (HTML/CSS)

I'm in the process of creating a simple website that includes a sticky Navigation Bar. However, I'm encountering an issue where text added to the website is being hidden behind the Navbar. Is there a way for me to adjust the positioning of the te ...

htmlcss

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

HTML: <div class="mySlides"> <img src="1.jpg"> <img src="2.jpg"/> <img src="3.jpg"/> <img src="4.jpg"/> <img src="5.jpg"/> </div> CSS: .mySlides { padding-top: 25%; padding-left: 5%; ...

htmlcss

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

htmlcssresponsive-design

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

javascriptcssvue.js

Attempting to align the dropdown menu to the left side

This is a challenge I'm facing: https://i.sstatic.net/d3PtN.png I'm attempting to align it in the following way: https://i.sstatic.net/GCwEO.png Below is the HTML code snippet: <li class='list-group-item'> <!-- The dropdow ...

htmlcss

Guide on developing a JavaScript script for implementing across numerous Bootstrap modals within a single webpage

I have been working on setting up a page with 14 different modals. Initially, all the modals were opening normally, but I recently discovered a way to make them draggable when opened. After some trial and error, I managed to implement this feature successf ...

javascripthtmlcssbootstrap-4bootstrap-modal

Eliminating padding from columns results in the appearance of a horizontal scrollbar

I needed to eliminate the padding from the bootstrap grid column classes. So I went ahead and did just that .col-x { padding: 0; } However, this action ended up causing the entire layout to break as a horizontal scrollbar appeared. I've put to ...

htmlcsstwitter-bootstrapbootstrap-4

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

My element has been 3D transformed in the following way: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now, I am looking to retrieve these values using JavaScript. Extracting the 3D matrix is simple: var matrix = $('.foo').css('tr ...

javascriptcssmatrix3dcss-transforms

Creating an Android application that integrates HTML styling efficiently

I currently have a social networking site with a mobile web version, and my goal is to package that view into an Android app and potentially enhance it with a custom splash screen. Essentially creating a branded browser window. If you have any tips or adv ...

jqueryandroidhtmlcssweb

Incorporating chart.js into a current Django page: a step-by-step guide

I am currently developing a website that includes a feature displaying total hours worked by an employee. I am looking to enhance this function by also showing the hours worked for each day in a month. I have successfully created a chart for this purpose, ...

pythonhtmlcssdjangochart.js

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float

Is there a way to achieve auto-sizing columns in Bootstrap?

Is there a way to achieve auto-width-columns in Bootstrap similar to UIKit? I am looking to create 5 columns with automatic widths. In UIKit, this can be achieved using <div class="uk-width-1-5"> ...

twitter-bootstrapbootstrap-4