#2912 - Hybrid responsive theme
0 guests and 0 members have recently viewed this.
The top 3 point earners from 7th Dec 2025 to 14th Dec 2025.
| PDStig |
|
|
|---|---|---|
| Gabri |
|
|
| Master Rat |
|
|
There are no events at this time
It's important as users will be expecting responsive design nowadays, regardless of us having a very good mobile mode.
Users will probably expect our own site to use responsive design, so it will need refreshing also.
I am actively developing a responsive theme based off a default theme using the Theme Wizard. The design I'm using is 12-column with breakpoints at 600 and 1000px. I realize dual-breakpoints complicates the design, but I decided upon this setup as it offers more flexibility. My design is 300px up to 1920px wide.
The first change I made was to add max-width: 100%; and height:auto; to img, like this:
img {
border: 0; /* Some (older?) browsers imply a border for linked images */
max-width: 100%; /* Responsive image 1 of 2 */
height: auto; /* Responsive image 2 of 2 */
}
FYI, width: 100%; had unintended consequences as it caused other graphics to grow excessively, such as the breadcrumbs graphic.
I have quite a few other changes I've made in global.css, including customizations that wouldn't apply to developing a default hybrid responsive theme. However, I can share any of the changes I've made if you'd like to review, as some of them may be helpful.
When you say 2 responsive options, are you referring to 1) the Bootstrap option and 2) a more open ##column / panel option? Or do you mean 1) a panel option and 2) a ##column option?