Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC:

marges bootstrap 4 years 10 months ago #6233

  • rloenen
  • rloenen's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 96
  • Thank you received: 0
Margins bootstrap
I experience that the margins between the different parts take up a lot of space and I would like to minimize that. I want to use them specially for smartphones.
Is there a way to do that?
Ronald
Attachments:

Please Log in or Create an account to join the conversation.

marges bootstrap 4 years 10 months ago #6238

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 229
  • Thank you received: 92
You would have to add some css to the styles optional property for your project. It's the kind of thing that you would probably need to explore the layout and existing css of the page in your browser's developer tools to find what changes work best for you.

Changing the values of the following css selectors would change some of the spacing in your screenshot (the values shown below are the default values so you would need to reduce these)
.page-header {
  padding-bottom: 9px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.accordion {
  margin-bottom: 20px;
}

If you wanted the changes to only be seen on smaller devices (where the menus move to the top rather than in the left menu) then you can wrap the css in a media max-width selector like this:
@media (max-width: 767px) {
.page-header {
  padding-bottom: 9px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.accordion {
  margin-bottom: 20px;
}
}

Hope this helps
Fay
The following user(s) said Thank You: rloenen

Please Log in or Create an account to join the conversation.

marges bootstrap 4 years 10 months ago #6239

  • rloenen
  • rloenen's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 96
  • Thank you received: 0
thanks Fay,

This will certainly help. If I want to permanently change this and perhaps some parts of the css in question, in which file should I do that?
regards
Ronald

Please Log in or Create an account to join the conversation.

marges bootstrap 4 years 10 months ago #6240

  • Fay
  • Fay's Avatar
  • Offline
  • Elite Member
  • Elite Member
  • Posts: 229
  • Thank you received: 92
The css for the default Bootstrap theme is here: modules/site/parent_templates/site/common/css/custom.css

Changes are likely to be overriden on upgrade though so if you're likely to make lots of changes you might want to make a custom theme.
Themes go in this folder: themes/site

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: JohnSmith
Time to create page: 0.044 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search