Owner: Brett
Group members: 2745
This group has been set up for general discussion. If you can't find a relevant group for the issues you wish to talk about, please feel free to use this one, it is open to all Elgg chat.
Nevermind! Figured out the correct way to do it seems to be to create a new mod that overrides the css. If it's any use to anyone else I just create this structure.
tdntheme/
├── composer.json # Plugin metadata
├── elgg-plugin.php # Plugin configuration
├── README.md
└── views/
└── default/
└── tdntheme/
└── css/
└── custom.css # Your CSS overridesAnd added this to the custom.css:
/* ==========================================================================
Walled Garden (Login Page) Mobile Fixes
========================================================================== */
@media (max-width: 768px) {
/* Fix: Login page content getting cut off on mobile */
.elgg-page-walled-garden > .elgg-inner {
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 1rem;
box-sizing: border-box;
}
/* Make the heading wrap properly */
.elgg-heading-walled-garden {
font-size: 1.5rem !important;
line-height: 1.3 !important;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Ensure page body doesn't overflow */
.elgg-page-walled-garden > .elgg-inner > .elgg-page-body {
padding: 0.5rem !important;
}
}
/*
=== Didn't need this but if the site title was longer... ===
@media (max-width: 480px) {
.elgg-heading-walled-garden {
font-size: 1.2rem !important;
}
}
*/
/* ==========================================================================
Mobile Responsive Fixes (Logged-in pages)
========================================================================== */
@media (max-width: 768px) {
/* Fix: Site title getting cut off / center-justified on mobile */
.elgg-page-header .elgg-heading-site,
.elgg-page-topbar .elgg-heading-site,
.elgg-heading-site {
text-align: left;
overflow: visible;
white-space: normal;
word-wrap: break-word;
}
/* Ensure header content doesn't overflow */
.elgg-page-header,
.elgg-page-topbar {
padding-left: 10px;
padding-right: 10px;
}
/* Make site title more readable on small screens */
.elgg-heading-site a {
font-size: 1.2em;
line-height: 1.3;
}
}
@media (max-width: 480px) {
/* Extra small devices */
.elgg-heading-site a {
font-size: 1em;
}
}
/* ==========================================================================
Group Page / Owner Block - Mobile Fixes
========================================================================== */
@media (max-width: 768px) {
/* Stack image and description vertically on mobile */
.elgg-image-block.groups-profile {
flex-direction: column !important;
align-items: center;
}
/* Limit the group icon size on mobile */
.elgg-image-block.groups-profile > .elgg-image,
.elgg-image-block.groups-profile img {
max-width: 150px !important;
height: auto !important;
}
/* Give the description full width when stacked */
.elgg-image-block.groups-profile > .elgg-body,
.elgg-image-block.groups-profile .elgg-profile-fields {
width: 100%;
text-align: left;
margin-top: 1rem;
}
}There's probably some work to do with Pages too, but I ran out of time. I'll find some time this week to do those, find the right-hand-side Pages menu that vanished somewhere along the line, and fix my personal bug-bear: members lists and counts including banned users literally everywhere...
I didn't have time to respond; you were quicker.
This is a problem with the current Elgg layout.
We often have to fix it using styles in custom plugins, but there's no single solution since 3rd-party plugins can also have their own styles, etc.
I'm glad you fixed the issues in your custom plugin!
No blog posts
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by Raül Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.