Hi, SiteOrigin Team!
So, I have some questions:
1. When I open my web page on iPhone 4s in horizontal position or vertical position it looks like mobile version with mobile version menu. When I open my web page on iPhone 6s in vertical position – all is ok, the mobile version menu work correctly, BUT if I change position of iPhone 6s to horizontal – the mobile version menu don’t work, and web page looks like desktop version. So what I have to do that on iPhone 6s in horizontal position my web page looks like mobile version menu?
2. How to change the size of header area in mobile version? My logo is to big, I need it smaller. How to customize texts fonts sizes and styles in header area in mobile version?
3. How to customize texts fonts sizes and styles in footer area in mobile version?
4. How to change meta slider size? I need that it will be bigger in mobile version.
5. How to change meta slider text area? I need that meta slider will not show the text area in mobile version.
Ufff…… I think that’s all on this time :)
URL: http://adlerpack.eu
Hi BAZZ
The first question does not have an easy answer I am afraid. The iPhone 6 has a vertical pixel count of between 1334 and 1920 pixels depending on the model, much the same with a lot of the newer HD phones. Because of this higher resolution it does not trigger the collapse point for the menu or the other responsive elements. It would require extensive and advanced CSS entries in order to achieve what you want. We can work through it with you but it will be no easy task. the other option would be to use something like the mobile module from the jetpack plugin.
Here is the Custom CSS you would need to answer questions 2, 4 and 5. You can add it by going to Appearance->Custom CSS and using the editor found there.
@media screen and (max-width: 480px) { /*Remove Metaslider Caption */.metaslider .caption-wrap { display: none;}/*Resize Slider*/.slider-524 { height: 150px !important;}/*Resize Logo*/body.responsive #masthead .hgroup .logo img{ height: 60px; width: auto;}}You can change the sizes on the slider and logo to whatever you are comfortable with.
There are a lot of elements in your footer, what changes do you want to make.
I’ll wait to hear from you
Magus
Hi, Magus!
Thanks for fast reaction!
So, about Your code….. I have customize it little beat :)
1. Ok. I’ll wait. Maybe your team will solve this problem in future. :)
2. It’s OK.
3. So, if You will check my web page here https://developers.google.com/speed/pagespeed/insights/?url=adlerpack.eu , You’ll see that google recommend – “Some of the links/buttons on your webpage may be too small for a user to easily tap on a touchscreen. Consider making these tap targets larger to provide a better user experience.
The following tap targets are close to other nearby tap targets and may need additional spacing around them. ”
That’s why I need to know how can I customize texts fonts sizes and styles in footer and header areas.
4. This code not exactly what I need, because this code is crashing the pic.
5. I made 2 changes in code:
@media screen and (max-width: 1920px) {
/*Remove Metaslider Caption */
.metaslider .caption-wrap {
display: none !important;
}
and my problem have solved on iPhone 4s and iPhone 6s :)
Hi BAZZ
Apologies about #4. When you alter any part of the slider it regenerates the id code. Please try this instead
#main-slider .rslides img { min-height: 150px;}Remember to keep it inside the media query.
The alteration you made to the max-width also removes the text overlay from the desktop view. It will only show it on screens with a resolution higher than 1920px, so while it fixes the issue on iPhone 6 it then breaks it for desktops. It may be worth dropping that down to 640px. As I noted earlier there are ways of targeting mobiles specifically, needing different CSS media queries for each screen type which would then make the stylesheet upwards of twice the existing size. Slowing down the site loading time.
For the footer items you can adjust them using this
#footer-widgets .widget { line-height: 2em; font-size: 14px;}The defaults are1.5em and 13px. Again, if you want this just for mobile you should add it into the media query.
Let us know how it goes
Magus
Hi, Magus!
You was right when You saying that changes in code (max-width: 1920px) will crash the desktop version.
I change it back to (max-width: 640px)
About footer code – it work perfectly.
Thanks a lot.
Hi BAZZ
You are welcome. If you need any more help please feel free to open a new support thread
Magus
BAZZ
Great job and nice website really
can you please open new thread for multi language
because the way you made it very nice and professional
can you tell us how ?
thanks
Hi, Dori M!
Thanks for compliments!
I use the Polylang plugin for translation.
If You need more info, You can read this threads:
Page: SiteOrigin – Free WordPress Themes and Plugins
or watch this video:
https://www.youtube.com/watch?v=SAb9gz8-Yqw
good luck
Dear Bazz
thanks you very much
this is what i was looking for
appreciate it .
Dori M
Glad to help!
Good luck!