Responsive Issues
Permalink Browser Info Environment
Hi
Having some issues with responsive items. (please see attached)
1. The burger menu sitting over logo on mobile? I have tried changing size of logo, didnt help?
2. Headings not responsive within layout?
3. Buttons (CTA) not responsive within layout.
Having some issues with responsive items. (please see attached)
1. The burger menu sitting over logo on mobile? I have tried changing size of logo, didnt help?
2. Headings not responsive within layout?
3. Buttons (CTA) not responsive within layout.
| Type: | Ticket |
|---|---|
| Status: | Archived |
http://www.devdesigneclectic.co.uk/osteopathbasingstoke/index.php/Treatments/Osteopathic-Treatments-Basingstoke
Hi,
1- Re the logo issue, the size of your logo seems a bit long. You can optimize it by using the psd files shipped with the theme to help with the logo size. They are on :
\theme_pixel\themes\pixel\images\logo.psd
\theme_pixel\themes\pixel\images\logo@2x.psd
The second option would be a css rule to resize the logo on narrow devices:
2. For the heading also you can tweak the font-size on the narrow devices like this:
3. And for the buttons:
These codes can all be placed inside custom.less file. (See `Instructions` page #18)
1- Re the logo issue, the size of your logo seems a bit long. You can optimize it by using the psd files shipped with the theme to help with the logo size. They are on :
\theme_pixel\themes\pixel\images\logo.psd
\theme_pixel\themes\pixel\images\logo@2x.psd
The second option would be a css rule to resize the logo on narrow devices:
@media only screen and (max-width: 479px) { #logo { display: flex; align-items: center; justify-content: center; img { height: 60px; } } }
2. For the heading also you can tweak the font-size on the narrow devices like this:
@media only screen and (max-width: 479px) { .heading-block * { font-size: 20px !important; } }
3. And for the buttons:
@media only screen and (max-width: 479px) { .button { font-size: 12px; } }
These codes can all be placed inside custom.less file. (See `Instructions` page #18)
Hi
I followed the instruction and added the code.
The logo change seem to work in mobile preview, but on my i-phone 11, still the same. I cleared cache and data. (please see attached.)
Also the heading code, appears to have only changed the green part of the headings? (please see attached)
Thanks
I followed the instruction and added the code.
The logo change seem to work in mobile preview, but on my i-phone 11, still the same. I cleared cache and data. (please see attached.)
Also the heading code, appears to have only changed the green part of the headings? (please see attached)
Thanks
Hi,
Did you apply the code on the provided link? I don't see the changes?
The changes I did only applies to screen lower than 479px. You can also apply them to one step bigger (between 480 and 767) with this:
Generally these are the small tweaks you can do with every sections of your site to get cleaner and optimized result on every screen size.
Did you apply the code on the provided link? I don't see the changes?
The changes I did only applies to screen lower than 479px. You can also apply them to one step bigger (between 480 and 767) with this:
@media (min-width: 480px) and (max-width: 767px) { #logo { display: flex; align-items: center; justify-content: center; img { height: 90px; } } }}
Generally these are the small tweaks you can do with every sections of your site to get cleaner and optimized result on every screen size.
I added code below to the custom.dev.less as per instructions #18
@media only screen and (max-width: 479px) {
#logo {
display: flex;
align-items: center;
justify-content: center;
img {
height: 75px;
}
}
}
@media (min-width: 480px) and (max-width: 767px) {
#logo {
display: flex;
align-items: center;
justify-content: center;
img {
height: 90px;
}
}
}}
@media only screen and (max-width: 479px) {
.heading-block * {
font-size: 20px;
}
}
@media only screen and (max-width: 479px) {
.button {
font-size: 12px;
}
}
@media only screen and (max-width: 479px) {
#logo {
display: flex;
align-items: center;
justify-content: center;
img {
height: 75px;
}
}
}
@media (min-width: 480px) and (max-width: 767px) {
#logo {
display: flex;
align-items: center;
justify-content: center;
img {
height: 90px;
}
}
}}
@media only screen and (max-width: 479px) {
.heading-block * {
font-size: 20px;
}
}
@media only screen and (max-width: 479px) {
.button {
font-size: 12px;
}
}
I did some minor changes to the provided code. Plz, copy again.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.