Manus additions #51
Closed
Manus additions #51
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…d so working to fix this now
…ne when hovered featured productsliquid i changed the margin on section title
…ey to products area.
…ection title heading spacing with padding 3rem
…nged slightly with grey htag now
…m logo size. need to tweak margin on bottom of hero section for more breathability and better flow of pattern to block colour. maybe add a drop shado
…y still need tweaks for RMD. Image links need fixed as 14 problems currently. Also text if buttons will make calls to Ajax API
- adjusted border radius on below fold section for a cleaner look -removed padding from about section title for better reading as well as text alignment Mobile Responsiveness Issues Analysis Issues Identified: 1. Reviews Section Positioning • The reviews container has left: 25% which causes it to be off-center on mobile • This creates significant margin issues on smaller screens • The container appears to be positioned incorrectly for mobile viewports 2. Navigation Bar Margins • Hero nav has fixed margins (20px, 15px, 10px) that may not scale well • Could cause alignment issues on very small screens 3. Featured Products Grid • Product grid layout may not be optimally responsive • Images appear to have fixed aspect ratios that might not work well on mobile 4. Trust Section Layout • Trust elements use auto-fit grid which is good, but min-width of 280px might be too large for small phones • Could cause horizontal scrolling on devices smaller than 320px 5. Trade Shows Section • Similar grid layout issues as trust section • Images have fixed dimensions (200px x 200px) that might be too large for small screens Key Problem Areas: 1. Reviews container positioning - Most critical issue 2. Fixed dimensions - Several elements use fixed pixel values 3. Grid min-widths - May cause horizontal scrolling 4. Margin scaling - Some margins don't scale proportionally Recommended Fixes: 1. Remove or adjust the left: 25% positioning on reviews container 2. Implement more flexible grid layouts with smaller min-widths 3. Use relative units (rem, em, %) instead of fixed pixels where appropriate 4. Add more granular media queries for very small screens (320px and below) Mobile Responsiveness Fixes Applied Key Issues Fixed: 1. Reviews Container Positioning (CRITICAL FIX) Problem: Reviews container had left: 25% causing severe misalignment on mobile Solution: • Removed left: 25% • Added margin: 0 auto for proper centering • Added responsive max-width adjustments for different screen sizes 2. Navigation Bar Responsiveness Problem: Fixed pixel margins didn't scale well across devices Solution: • Converted fixed pixel values to rem units for better scaling • Added specific breakpoints for 320px screens (very small phones) • Improved padding and spacing for touch interfaces 3. Trust Section Grid Layout Problem: Min-width of 280px caused horizontal scrolling on small screens Solution: • Reduced min-width from 280px to 240px • Added single-column layout for screens under 480px • Optimized padding and spacing for mobile 4. Trade Shows Section Problem: Fixed 300px min-width and large images caused layout issues Solution: • Reduced min-width from 300px to 250px • Reduced image sizes from 200px to 150px (and smaller on mobile) • Added responsive breakpoints for better mobile experience 5. Enhanced Mobile Media Queries Added comprehensive breakpoints: • @media (max-width: 768px) - Tablet and large mobile • @media (max-width: 480px) - Standard mobile phones • @media (max-width: 320px) - Very small phones Specific Improvements: Typography Scaling • Converted fixed pixel font sizes to rem units • Added responsive font scaling for better readability • Maintained visual hierarchy across all screen sizes Spacing and Layout • Improved padding and margins for touch interfaces • Better gap management in grid layouts • Optimized content spacing for mobile reading Grid Responsiveness • Single-column layouts on very small screens • Reduced minimum column widths to prevent horizontal scrolling • Better content flow on mobile devices Touch Interface Optimization • Larger touch targets for navigation elements • Improved button sizing for mobile interaction • Better spacing between interactive elements Testing Recommendations: 1. Test on actual devices with screen widths: 320px, 375px, 414px, 768px 2. Verify no horizontal scrolling occurs on any screen size 3. Check that all interactive elements are easily tappable 4. Ensure text remains readable at all sizes 5. Validate that the reviews section is properly centered Files Modified: • styles.css → styles_fixed.css (complete mobile-optimized version)
added styles to fix section titles text align on mobile
…en sections - removed margin bottom from hero banner
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
…skeleton-theme into manus-additions
…skeleton-theme into manus-additions
Committed from shop: Andra's Garden Heaven
…skeleton-theme into manus-additions
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
Committed from shop: Andra's Garden Heaven
…skeleton-theme into manus-additions
Contributor
|
Closing this PR, as the assets and content are specific to a certain theme and shop, rather than fitting the Skeleton Theme, which is intended to remain independent of any particular theme or shop. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.