Hi, I was using the theme with the visual editor, and while it looks ok on the desktop, on the mobile it’s not working properly.
Here I attach a screenshot to see what I’m talking about.
Any help?
Thanks
Hello skyscorcher,
I have checked your screenshots and the social buttons and orange button from your top do not come from our theme but only come from some untested plugins which you are using on your side. Please notice that our theme does not have any problem with responsiveness, as you can see in our demo here -> http://demo.tagdiv.com/newspaper/ Please try to disable all the active plugins, leave just Visual Composer to active, clear all cache and install only the plugins that come bundled with our theme and rule out the conflicting plugins. Please notice that exist a lot of plugins but not all of theme are working as properly with our theme. In future, if on your side appears something wrong, please try always to compare it with our demo and if on the demo looks good, please notice that the issue comes from your side and not from our theme.
Thank you fo your understanding!
Hi, thanks for your fast reply but I will have to disagree. The social buttons and the orange button come built-in with visual composer. Aren’t the modules of visual composer supposed to be supported by your theme?
Thanks
Hi
Sorry for this misunderstanding. Because of huge amount of works my colleague Catalin omitted to check the origin of these buttons.
Checking your site I’ve noticed that you have setup some margins for this button: http://screencast.com/t/Ir5RY9R2s1 that’s why its layout is affected on mobile. If I remove these margins the button will be displayed fine: http://screencast.com/t/QKmujbmG
Edit the page with Visual Composer and remove the indicated margins as they cause the misalignment for your button.
Thanks!
Hi thanks for your reply. That did the trick
Apart from the orange button, I also have the social media buttons that stuck one below the other. Could you help me on these as well?
I’d like them to be one next to the other obviously (like in the desktop view)
thanks again
Hi,
In order to have the icons position side by side, you will have to assign an extra css class to the row in visual (the row that contains the icons) composer like so: http://screencast.com/t/pjVo354N and then use your custom class with css so you can target the element:
@media(max-width:767px){
.mycustomclass .wpb_column{
float:left!important;
width: 16.66666667%!important;
}
}
Thank you!
Hello, once again that did the trick 🙂
but the icons now look very condensed. Is there an option to add some space between them? Or just make them a bit smaller on mobile view so they look nice again?
Thanks
Hi,
You seem to have an empty element here preventing the icons from stretching properly: http://screencast.com/t/r8lunzbSjBl Please check your back-end again and remove the extra element.
Thank you!
Hi, I tried to remove the elements that I had left and right but this didn’t fix the issue. Moreover it brought all the icons on the left (they are not centered any more).
Here you can look how it looks like:
http://quirktools.com/screenfly/#u=http%3A//puppies4all.com&w=375&h=667&a=37&s=1
Here is how it looks on the inside of the page with the visual editor.
Anything else I can do about it?
Thanks
Moreover if I remove the blank columns left and right, on the desktop view the icons get too spread out and they don’t look nice. Any ideas?
Hi
Replace the css provided by Bogdan with this one: http://screencast.com/t/nKnhkExl1K – http://screencast.com/t/aBDxEqGroele
@media (min-width: 678px){
.social-media{
width: 640px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 768px){
.social-media .wpb_column {
width: 24.666667%!important;
float:left!important;
}
}
This css will work fine only if you have four columns on row. If you add a new column the values must be updated to the new layout.
Thanks!
Hey, that fixed everything.
Thanks a lot for your help 🙂
