-
Posts
-
Hi
I have been testing the theme on my phone (iPhone 4) and I am having a few issues with regard to layout:
1) I have changed the size of the phone number as I needed it bigger and this has caused it to be too close to the social icons, how can I move it down slightly? It is fine when viewed normally, so only needs to be moved down when the social icons switch to going above the number.
2) Is there anyway to move the mobile menu icon up and to the right slightly? I would ideally like it to be next to the social icons and phone number. That way I can display the logo all the way across on the page when viewed in mobile.
3) The special heading on the homepage of the site does not change when viewed on mobile or even when scaling down the browser window. It is a long title and instead of going down to two or three lines in continues to go off the page or over run into the sidebar. I have noticed this issue on other pages too when the ‘special heading’ is too long.
Here is a screenshot which shows all the issues: http://i41.tinypic.com/2jd0xp0.png
Apart from that, the theme works very well at being responsive.
Thanks,
Rob
Not really related to the responsive issues but only a small query. How can I edit the calendar so that the month name is not in italics and slightly larger?
Hi,
You can use these on your custom.css or Quick CSS
1.) Move phone number:
@media only screen and (max-width: 767px) {
.responsive #header .social_bookmarks {
margin-bottom: 10px;
}
}2.) You can move the logo using this
@media only screen and (max-width: 767px) {
#header_main {
z-index: 9999;
}
.responsive .logo {
top: -50px;
margin-left: 100px;
}
}Adjust the values.
3.) You can adjust the font size of the special heading while viewing on mobile devices
@media only screen and (max-width: 767px) {
.av-special-heading h3 {
font-size: 13px;
letter-spacing: 0;
}
}Regards,
Ismael
Hi Ismael
Thank you for the code.
1) This works fine, so thank you very much for that.
2) I was wanting to move the menu icon rather that the logo, sorry if that wasn’t clear. I want to move the menu icon up so that it is next to the social icons and phone number.
3) That doesn’t really solve the issue as the title still goes off the page, and it also changes the font size of shorter h3 titles which fit onto the page fine. What I need it to do instead is that if the title is too long to fit on the page then it splits it into two, or even three, lines instead. Is this possible?
Regards,
Rob
Hi Rob,
#2) We’ll need to see your site live as it shouldn’t be sitting like that now and I’m not sure what has caused it to do so.
#3) You can change the way the text wraps on the special headers using the following css but keep in mind it is set this way because the special headers aren’t really supposed to be used for long sections of text:
.av-special-heading{ white-space: normal !important;Regards,
Devin
- The topic ‘Responsive Issues’ is closed to new replies.