- This topic has 7 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
Hi there,
I am finally in the process of makeing the whole page mobile responsive.
I have an issue with my whole page. When i am on my phone (sasmung galaxy s7) and go on my site all pages have like an extra white stripe vertically on the right. So basically i can zoom out my site and see it then. You can see it on the first screenshot. When i am on my buddys phone (iphone 5), it doesn’t show any content except a few images. All the text is gone. I really dont know why. Maybe its something with the viewpoint but i am not sure.
The second thing is the header menu. How can i change the breackpoint at which my menu shows the three stripes and how can I change that the cart icon and menu icon are on the same level? (second screenshot)
The page-url is watchdog.hr
Tank you in advance,
Best regards,
Ivan
Hi Ivan,
I hope you are well today and thank you for your questions.
I am finally in the process of makeing the whole page mobile responsive.
I have an issue with my whole page. When i am on my phone (sasmung galaxy s7) and go on my site all pages have like an extra white stripe vertically on the right. So basically i can zoom out my site and see it then. You can see it on the first screenshot. When i am on my buddys phone (iphone 5), it doesn’t show any content except a few images. All the text is gone. I really dont know why. Maybe its something with the viewpoint but i am not sure.
This can be child theme issue used on your site so to confirm it just temporary use the Jevelin theme on your site. If everything works fine then it’s your site child theme issue.
Please temporary disable the W3 Total Cache used on your site.
Also this can be due to plugin conflict on your site so please try temporary deactivating all plugins except Unyson plugin and WpBakery page builder plugins and see whether everything works fine and then enable the plugins one by one to see which plugin is conflicting if any or use following plugin to check it.
https://wordpress.org/plugins/health-check/
The second thing is the header menu. How can i change the breackpoint at which my menu shows the three stripes
To achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
and how can I change that the cart icon and menu icon are on the same level? (second screenshot)
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 550px){ .sh-header-mobile .container { max-width: 98% !important; } }Best regards,
Shufflehound teamI tried to ativate the jevelin theme and deactivate all plugins but it didnt work. There is still the white stripe on the side. Do you have another suggestion?
For the breakpoint of the mobile header and when to turn to the hamburger menu i tried this custom css:
@media(max-width:1326px) {
/* BreakPointMenu */
.menu-toggle {
cursor: pointer;
display: inline-block;
font: bold 16px/1.3 “Source Sans Pro”, Helvetica, sans-serif;
margin: 0;
padding: 12px 0 12px 20px;
}.menu-toggle:after {
content: “\f502”;
font-size: 12px;
padding-left: 8px;
vertical-align: -4px;
}.toggled-on .menu-toggle:after {
content: “\f500”;
vertical-align: 2px;
}.toggled-on .nav-menu,
.toggled-on .nav-menu > ul {
display: block;
margin-left: 0;
padding: 0;
width: 100%;
}.toggled-on li,
.toggled-on .children {
display: block;
}.toggled-on .nav-menu li > ul {
background-color: transparent;
display: block;
float: none;
margin-left: 20px;
position: relative;
left: auto;
top: auto;
}.toggled-on .nav-menu li > ul a {
color: #141412;
width: auto;
}.toggled-on .nav-menu li:hover > a,
.toggled-on .nav-menu .children a {
background-color: transparent;
color: #141412;
}.toggled-on .nav-menu li a:hover,
.toggled-on .nav-menu ul a:hover {
background-color: #db572f;
color: #fff;
}ul.nav-menu,
div.nav-menu > ul {
display: none;
}
}But i didnt succeed. Could you help me with that? Do i need to enter a custom function or what?
Oh yeah i found the problem for the white stripe and the zoom in zoom out problem. It was because of one column at the end that i didnt turn on the custom mobile padding. When i turned it on it disappeard.
Thanks again. I only hope you can help me with the above issue.
Best regards,
Ivan
Glad you find out the white stripe issue.
Regarding changing mobile breakpoint as said above, to achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Alright. THanks anyway for your help. Appreciate it.
Best regards,
Ivan
You are most welcome here 🙂
