Spacious Responsiveness – Screen size affects TG: Services and Menu?
-
Hi! I’m LOVING the Spacious Theme – it’s been a joy working with and the majority of my issues were easily resolved by scouring the support forum here. However, I have now come to a hurdle in the road that I need some help with and couldn’t find an applicable solution within the forum.
So I’m testing the theme for responsiveness on my site located here – https://www.maciasservicegroup.com between a few different devices and have realized 2 seemingly separate issues:
1) TG: Services section suddenly becomes skewed depending upon what device I am viewing the site on.
I have tested the site on the following devices:
Toshiba C655D Windows 8.1 Laptop (Native display) – 1366 x 768
Toshiba C655D Windows 8.1 Laptop (Using an external Acer monitor) – 1600 x 900
Toshiba C655D Windows 8.1 Laptop (Using an external Dell monitor) – 1280 x 1024
Asus Windows 8.1 Laptop (Native display) – 1366 x 768LG G4 – Android 5.1
iPad Mini Retina – iOs 9.02What’s interesting/strange is that the Toshiba laptop and the Asus laptop showed the “Legal” service differently (until I altered the wording to make it fit), even though they are the same exact screen size.
On the external monitors, the “Legal” section is also auto-altered, and appears slightly different.
On the LG G4, the screen has become small enough to where the them adjusts the menu to a more mobile friendly menu – exactly what I would expect. It also lists the TG Services vertically on this device – no problem, both in portrait and landscape modes.
However, on the iPad, the issues become even more apparent. When in portrait mode, the menu changes to a “Mobile” menu, but the TG Services try to remain in the format they are when viewed from a laptop – 2 rows of 3. This causes some problems:
– The top 3 services are listed correctly, except the bottom of HR Services is out of alignment (Compare it to how it looks on a laptop, you’ll see what I mean)
– The next row is all skewed – the two services that should be there (Healthcare and Customer Service) are out of order – Customer Service and Legal and in spots 1 and 2 of the row, respectively, but they aren’t even on Row 2….somehow, they are moved down to a 3rd row, leaving the service in position 3, Healthcare, in the correct spot of row 2. Crazy.
– Turning the iPad and placing it into landscape mode yields similar results – the full menu is back, but tapping on the two menus to show the submenus contained within does nothing (About Us and Services). I created these menus as custom links so that only the submenus within were “Clickable”. This is creating a problem on mobile. Apparently, drop down menus are not being recognized.
– Landscape mode similarly alters TG Services: Row 1, 1st service – Risk Management, is now shorter than its friends “Payroll” and “HR Services” in Row 1, yet Row 2’s services are all the correct length and line up correctly.Essentially, the screen width seems to be controlling these issues, but the TG Services aren’t formatting correctly and the drop down menus not being “tappable” is creating a potential functionality issue.
Am I missing something? I ran through the tutorial to a “T” – is there a “Responsive” checkbox I need to select somewhere or a bit of custom CSS that I could toss into the customizer? A plugin?? Anything? lol
Thanks!
- The topic ‘Spacious Responsiveness – Screen size affects TG: Services and Menu?’ is closed to new replies.