I am new to WordPress so I am not 100% sure which product is at fault so if it is not the theme then please advise where I should go.
I am using WordPress 4.7.1 and the theme TheGem Child which came with Visual Composer. I purchased this theme just maybe a month ago and have been learning how to use wordpress, this theme and visual composer all at once.
So what I am finding is there seems to be a lot of issues that don't seem to work. So many that I think it will be best to focus just on a single issue to start with so maybe it will help me resolve other issues I am having.
So at the bottom of my home page I have an inner row with 3 inner columns.
All 3 inner columns are set to use "6 columns - 1/2" for the default "Responsive column" and then on the Width and Responsiveness tab I use "4 columns - 1/3" for the first two screen width options and I use "12 columns - 1/1" for the smallest mobile setting. What is happening when I view that page with the Chrome browser if I adjust the size of the browser window to be full width I see all three columns side-by-side, if I adjust the browser window to be tablet size then all three inner columns disappear. if I shrink browser to small like the size of mobile they show back up one column per row. If I test the same page using IE browser or Safari then it works as expected.
Again I am finding all sorts of similar issues but if I can resolve this would be a great starting point for me.
Chrome-Desktop.png is showing my web page inside the chrome browser where the browser window is sized with a width for my desktop. (You will see all 3 boxes-red, white and blue boxes, in 3 columns) - This is correct.
Chrome-tablet.png is showing my web page where I shrunk the browser window to be the width of my tablet. (All boxes have disappeared) - Obviously this is not correct.
Chrome-mobile.png is showing my web page where i resized the browser window to a width like a mobile device (you see all 3 boxes in a single column) - This is also correct.
IE-tablet.png shows my website in the IE browser sized the same as my tablet (you can see all 3 boxes in 2 columns) - this is correct.
So why does the output work for IE but not for chrome?
When I use Visual Composer I set all three inner-columns (boxes) to the same settings which was "6 columns - 1/2" for the default (aka tablet) width.
Then I set column width for the desktop to be "4 columns - 1/3" and for mobile I set width to be "12 columns - 1/1".
If you go to www.crossfitstarsandbars.com and scroll to the bottom (in Chrome) and resize your browser window you will see the boxes disappear. If you use IE they do not disappear.
I had just one other question but I am not sure if you prefer I start a new ticket. This is also an issue where something works for one browser but not another, this time in Chrome it works but not in IE.
So on the same page as before (http://www.crossfitstarsandbars.com) you will see a Google Map about half way down the page. I checked the box on that map control to Deactivate Map Zoom By Scrolling. So when I use my mouse wheel to scroll down the page in Chrome, as my mouse scrolls over the map the page just continues to scroll as I would want. But in IE when I use mouse wheel to scroll, once the mouse goes over the map it begins to zoom in or out instead of scrolling the page. Can you tell me where to get help for that?
I am new to WordPress so I am not 100% sure which product is at fault so if it is not the theme then please advise where I should go.
I am using WordPress 4.7.1 and the theme TheGem Child which came with Visual Composer. I purchased this theme just maybe a month ago and have been learning how to use wordpress, this theme and visual composer all at once.
So what I am finding is there seems to be a lot of issues that don't seem to work. So many that I think it will be best to focus just on a single issue to start with so maybe it will help me resolve other issues I am having.
So at the bottom of my home page I have an inner row with 3 inner columns.
All 3 inner columns are set to use "6 columns - 1/2" for the default "Responsive column" and then on the Width and Responsiveness tab I use "4 columns - 1/3" for the first two screen width options and I use "12 columns - 1/1" for the smallest mobile setting. What is happening when I view that page with the Chrome browser if I adjust the size of the browser window to be full width I see all three columns side-by-side, if I adjust the browser window to be tablet size then all three inner columns disappear. if I shrink browser to small like the size of mobile they show back up one column per row. If I test the same page using IE browser or Safari then it works as expected.
Again I am finding all sorts of similar issues but if I can resolve this would be a great starting point for me.
Thanks
Wayne
Hi, sorry, not quite sure what do you mean. Can you pls provide more details with screenshots?
OK I attached 4 screen shots.
Chrome-Desktop.png is showing my web page inside the chrome browser where the browser window is sized with a width for my desktop. (You will see all 3 boxes-red, white and blue boxes, in 3 columns) - This is correct.
Chrome-tablet.png is showing my web page where I shrunk the browser window to be the width of my tablet. (All boxes have disappeared) - Obviously this is not correct.
Chrome-mobile.png is showing my web page where i resized the browser window to a width like a mobile device (you see all 3 boxes in a single column) - This is also correct.
IE-tablet.png shows my website in the IE browser sized the same as my tablet (you can see all 3 boxes in 2 columns) - this is correct.
So why does the output work for IE but not for chrome?
When I use Visual Composer I set all three inner-columns (boxes) to the same settings which was "6 columns - 1/2" for the default (aka tablet) width.
Then I set column width for the desktop to be "4 columns - 1/3" and for mobile I set width to be "12 columns - 1/1".
If you go to www.crossfitstarsandbars.com and scroll to the bottom (in Chrome) and resize your browser window you will see the boxes disappear. If you use IE they do not disappear.
Let me know if you need any more info.
Thanks
Wayne
Please try to set margin-top as 0 for this row:
That fixed it! Thank you a million.
I had just one other question but I am not sure if you prefer I start a new ticket. This is also an issue where something works for one browser but not another, this time in Chrome it works but not in IE.
So on the same page as before (http://www.crossfitstarsandbars.com) you will see a Google Map about half way down the page. I checked the box on that map control to Deactivate Map Zoom By Scrolling. So when I use my mouse wheel to scroll down the page in Chrome, as my mouse scrolls over the map the page just continues to scroll as I would want. But in IE when I use mouse wheel to scroll, once the mouse goes over the map it begins to zoom in or out instead of scrolling the page. Can you tell me where to get help for that?
Wayne
Try to add next code to custom css in theme options: