Mobile view does not match up with CSS customizer
-
Hi,
The mobile view on an actual mobile device (in this case, Chrome and Safari on an iPhone 7+) for my website, http://commonthreadsproject.net , are not matching up with the customizer viewport, so I have to publish each time and then check on a mobile device. The biggest issue is that the header images on the Maisha theme homepage are warped.
The blog I need help with is: (visible only to logged in users)
-
Hi,
The theme that you are using is optimized for different display sizes and works with the srcset element.
One of the most daunting challenges for web designers and web developers in implementing responsive web design has been using responsive images. The actual benefits of responsive web design can only be yielded if responsive images are used since images are a large component of web design. HTML5 makes developing responsive web design easier. To ensure that responsive images are being used using the srcset attribute ensures that the right size image is served for different screen sizes.
This means that for certain screen size you will get an image that is the most adjusted.
Eg. for 768px screen width, you’ll see this picture:
https://commonthreadsproject.files.wordpress.com/2017/04/sewing.jpg?w=768 which is cropped when you compare it to the original one.I know that you might need a few Custom CSS modifications here as well
Eg. I’d suggest to modify spacing for the button in Additional CSS customizer available from the left menu, and paste there:.form-submit-button { letter-spacing: 3px;} -
Hi eastplease,
The biggest issue is that the header images on the Maisha theme homepage are warped.
I’ve had a look at your site and I can’t see any warped images. If you are still having problems with this, please upload a screenshot of the problem area to Snaggy and send me a link so I can take a look.
Thanks!
- The topic ‘Mobile view does not match up with CSS customizer’ is closed to new replies.