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!
Welcome to Elgg!
Look at these plugins:
Nikolai, thanks I'll look them over. I am currently working on a plugin based on an older wp plugin that I updated myself which works flawlessly still to this day. But I will have a try with your suggestions also to see if they meet with my needs.
Not for us ;) https://pw.wzm.me/members All customizations are in your custom plugins
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.