-
-
Hello –
I have been working on the mobile version of my site, and have a short list of things I need help with, that I can’t find in the forums or documentation:
BUGS
1. The mobile site size seems to be too big. You can move it to the left when scrolling. A large blank space appears to the right. You can recenter the site, but the slider (I am using revolution slider) sticks and won’t recenter.2. There is a large white space at the bottom of my mobile home page, which I think is the rows I have hidden on responsive layout (link: https://66.147.244.177/~lavendl6/ location: under the call to action row, above social media buttons.
3. I can’t seem to center the social media icons (they only show on mobile). I am using the API widget code to import the “social media widget” to this column.
MENUS
3. Is there a way to make the footer responsive? I want to hide the footer or portions of the footer just on mobile. I would like to hide footer column 3 and footer column 4, but would hide all of it if my options are all or nothing.4. Is there a way to make the right sidebar menu responsive? I would like it to just appear on mobile.
I can’t get the right sidebar menu to re-appear now, to show you what I mean. I think perhaps we added code to remove the sidebar to help with spacing (or something) – is that why? Or am I not doing it correctly?
Thank you!
Rebecca -
After the most recent update on 4/14/16 (Tower 1.6) the above issues are still there. In addition, there are new problems with the mobile site:
7. There is a white space/margin to the left of the slider. This seems to correspond directly with the amount of overhand the slider has on the right side, past the header.
8. The responsive dropdown menu (left of the logo) no longer works as a regular dropdown, laying over the top of the site. Instead, it pushes the site down and essentially becomes its own row. Is there any way to return it to a regular dropdown?
9. The navigation bar is not sticky. Is there any way to make it sticky on mobile, like it is on the site? Or is this not possible for mobile?
-
Hello,
1-The side space is due to an element that is wider that the responsive layout of the theme. Causing it to scroll horizontally. This does not happen on our side so it must be some third party element causing it. Please try to disable all third party plugins and try again.
2-Add this code into your custom css box, to hide that row in mobile:
@media (max-width: 480px){ #fws_571102a89de8f { display: none;} }3-Do you mean the socials in footer? Or the ones above footer? The above footer doesn’t seem to need any centering. However you can edit them with a little css code.
4-The side bars do show up in responsive mode. They are located at the end of the page. if you have removed it before, you can undo the changes.
7-the issue with slider did not happen before(when i checked your site) Did you made any changes to files? Or installed a new plugin?
8-You have a non-transparent header now, and that is the normal responsive layout of it. Maybe you are confusing it with the transparent header style.
9-By default it is not sticky on mobile.
Note: Please update Visual Composer too. Follow the instructions in this article.
Let us know.Best regards!
-
Mihaila – I apologize, I got messed up with the numbers above (two #3s, missing a #5 and #6) – sorry it is confusing.
1. I deactivated all the plugins on my site (except Evnvato Toolkit and Visual Composer, because those weren’t available to deactivate.) The space to the right disappeared on mobile. I then reactivated each plugin, one at a time. It re-appeared after I activated Jetpack. I have kept Jetpack de-activated for now, but was planning to use it for some things. Can this be fixed?
2. This code did not work. There is still a large white space in the row under the call to action row, above social media buttons. I am not sure if this is the row I have hidden in responsive, or if I need to adjust the size of the row where the social media buttons are located.
3. The social media buttons are not centered (the buttons in color, only visible on mobile, just below the call to action – not the buttons in the footer). Do you have a link where I can find basic CSS code (like centering images in a row) so I don’t keep bothering you with CSS questions? These buttons are actually a widget (Simple Follow Me Social Buttons Widget), and I’m importing that widget into the row using the AMR Shortcode plugin – I imagine this is why it is not responding to regular editing. If centering the buttons is not something I can easily do, I will keep them left aligned – I would just prefer them centered.
4. The right menu is turned off, but I want it back on. I cannot find where to add the menu back. That is my first question – I’ve looked everywhere, and I can’t figure out how to do it. Second related question: when I turn it back on, can I have it only appear on mobile?
5. Footer: Is it possible to make the footer or specific columns of the footer not appear in mobile (appear on the full site only)?
7. The issue with the slider only appeared after I updated to the new version of Tower. When I deactivate Slider Revolution it goes away, because the slider disappears. However, when I re-activate it, it happens again. There is a large white space to the left of the slider – and that same amount of space is added to the right (the slider overhangs the menu bar.) I’ve left this plugin activated, so you can see what I mean.
8. Thank you – yes, that is it. We made the header non-transparent in order to fix issues with the slider, so I guess I’ll leave it that way.
9. Is there any easy way to make the header sticky on mobile, or would this require me hiring someone to customize?
Note: I have updated to Tower 1.6 and Visual Composer 4.11.2
-
Hello,
1-Sorry but this is not an included plugin so we can not give support on it. You can try other plugins that do it’s job.
2-I edited the code to this:
@media (max-width: 480px){ #sfmsb_settings-2 { margin-top: -70px !important;} }The socials are generated by a third party plugin. Please keep in mind that we do not support third party plugins.
3-You can learn more about css from many sites available in internet. I can suggest w3schools.com
I added this code:span.sfmsb-circle { font-size: 35px !important;}into the@media(max-width: 480px)block.4-You can turn on the side menu for mobile in Header Options > Responsive menu style.
5-Yes, with css. To remove entire footer, add this:
@media (max-width: 480px){.footer_wrapper { display: none;}}7- Was the issue when you had Jetpack plugin activated? I checked it now but i don’t see the white space anymore.
9-I added this code into the
@mediablock:.header_wrapper { position: fixed !important; margin-top: -2px; }Please check your site.
Best regards!
-
Mihaila –
1. Okay – thank you. I’ll leave Jetpack off for now.
2. Thank you – that looks great!
3. I understand this is a third party plugin. Since it is an issue of being centered, not the function of the plugin, I was hoping it was a simple layout issue (like the question above). Thank you for your code, but it doesn’t seem to have worked, so I’ll just leave the row left-aligned. Can you tell me where you added this code so I can remove it?
4. Thank you.
5. Thank you! Is there a way to remove just footer column 3 and 4 (and leave column 1 and 2 on mobile), or is my only option to leave or remove the entire footer?
7. No, I did not reactivate Jetpack. The large white space is now gone on the right – but there is still a small white margin on the left of the slider. I can send a screenshot of my mobile phone so you see what I mean, if you tell me where to send it.
9. Perfect – thank you!
-
Mihaila –
3. I just checked my CSS and saw the code there, so I know where to remove it. No need to respond on that.
7. I found the issue – in my CSS there was the code:
@media (max-width: 480px){#rev_slider_1_1_wrapper { left: -10px !important;}}
I don’t remember why we put that in there. Anyway, I removed that code, and the margin to the left of the slider is now gone. So I don’t need help with this anymore.
5. I would still like an answer for #5, but that’s all that I’m waiting on for this thread.
Thanks again!
Rebecca -
Hello,
I added these lines into your custom css box, inside the
@media (max-width: 480px):.footer_wrapper .row-fluid .span3:nth-child(3) { display: none;} .footer_wrapper .row-fluid .span3:nth-child(4) { display: none;}The third and forth footer column are removed from mobile view.
Best regards!
-
Mihaila – this is fantastic! Thank you so much for your help – my mobile site looks great now.
-
If I read the above posts correctly, you did the below to make the header and menu sticky on the mobile site? I tried doing this but it’s still not sticky. What else can I do?
<p style=”box-sizing: border-box; margin: 0px 0px 22px; color: #4b4d4d; font-family: Raleway; font-size: 14px;”>9-I added this code into the <code style=”box-sizing: border-box; font-family: Inconsolata, Consolas, Monaco, ‘Lucida Console’, monospace; font-size: 15px; background: #f9f9f9; display: inline-block; padding: 0px 5px; line-height: 25px; border: 1px solid #dddddd; max-width: 95%; vertical-align: middle; margin-top: -3px;”>@media block:</p><pre style=”box-sizing: border-box; overflow: auto; font-family: Inconsolata, Consolas, Monaco, ‘Lucida Console’, monospace; font-size: 15px; background: #f9f9f9; padding: 5px 10px; line-height: 18px; border: 1px solid #dddddd; max-width: 95%; vertical-align: middle; margin-top: 0px; margin-bottom: 24px; color: #4b4d4d;”><code style=”box-sizing: border-box; font-family: Inconsolata, Consolas, Monaco, ‘Lucida Console’, monospace; background: transparent; display: block; padding: 0px; line-height: 25px; border: none; max-width: 100%; vertical-align: middle; margin: 0px; overflow-wrap: normal; overflow: auto;”>.header_wrapper {
position: fixed !important;
margin-top: -2px;
}
-
Hello,
@JJesenovec,
Please open up a new topic and give us detailed description of what you want to achieve. Post your site’s link and this ticket as reference too.Best regards!
-
You must be logged in to reply to this topic.