Hi Cailley,
First of all, thank you for using Sydney. I am happy to help any queries for it.
My guess, you’re referring to the main slide image on header section. The responsive image setting for this is available under Appearance > Customize > Hero Area > Hero Slider > scroll down to most bottom to get the “Slider mobile behavior” section, and choose Responsive. Save setting and clear any cache before reloading your site.
Hope that helps.
Regards,
Kharis
Hi Kharis!
Thanks for that! It doesn’t seem to have made a difference, but you’re correct that the header text on each of my webpages has issues (a word being split between two text lines, text overlap, etc) when viewing on mobile.
Also, the text on my Homepage in the section “Paper Made From Earth-Friendly Minerals” is now a long string of disjointed letters on the mobile. This section was created with the widget “Sydney FP: Services Type A.”
(I was looking for a way to send you a screenshot, but maybe this forum doesn’t have that capacity?)
Thank you, nice to see your name on this support forum again!
Cailley
I was looking for a way to send you a screenshot, but maybe this forum doesn’t have that capacity?
Upload your screenshot to a file sharing services like Google Drive, and share its public link in your comment.
Regards,
Kharis
Hi Kharis,
Great, thanks for the work-around! Screenshots here: https://drive.google.com/drive/folders/1OaZ81vRlqjurE2UoTsfI-xbycmdeypUq?usp=sharing
Image 1: text overlaps each other
Image 2: text is spread out
Image 3 & 4: background color of the menu at the top of screen on some pages is black and some is white – it’s hard to see when it’s white. Possible to change the color?
Still very much learning about mobile, so am grateful for tricks to make it look better! Many thanks,
Cailley
Hi,
Thank you for sharing the link.
I am not sure if I am inspecting the correct site (http://henry.joshschuyler.com/). Because your first image shows different header. Can you confirm whether I am checking the same site address?
Regards,
Kharis
Hi Kharis,
Yup, it’s the correct link to the site. Some of the images are from pages other than the Homepage. I edited the image file names to correspond with which page they were screenshot from. Menu in upper right of homepages shows the names of the different pages.
Thanks!
Cailley
Hi Kharis,
Just checking in to see if you got my last message?
Thank you!
Cailley
Hi @cailley,
I am sorry for the long delay from my end.
I did another inspection and I’d suggest this CSS code to add to your site’s Additional CSS (located under Appearance > Customize menu).
@media only screen and (max-width: 450px) {
.header-slider .text-slider h2.maintitle {
font-size: 30px;
padding-bottom: 20px !important;
}
}
@media only screen and (max-width: 760px) {
.panel-layout .panel-has-style > .panel-row-style {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Before running your check, ensure:
* all cache are cleared,
* your web browser’s history/cache is cleared,
* restart your web browser.
Regards,
Kharis
Thank you Kharis! That worked, I now see the screen on the homepage in a compressed way that prevents the text from wrapping.
Could you identify for me which part of the code you gave me can be changed to make this applicable to the other pages of my website as well? Right now it has only impacted the header on the home page.
Thank you!
@media only screen and (max-width: 450px) {
.header-slider .text-slider h2.maintitle {
font-size: 30px;
padding-bottom: 20px !important;
}
}
@media only screen and (max-width: 760px) {
.panel-layout .panel-has-style > .panel-row-style {
padding-left: 0 !important;
padding-right: 0 !important;
}
}`
Hi @cailley,
Thank you for getting back.
I did checking some inner pages of your site and they look fine to me. Seems likely I was not able to find which your pages are having the same spacing problem on smaller screen.
Can you provide links to your pages to investigate? If possible, please provide screenshots to the issue of each.
Regards,
Kharis
Hi Kharis,
Sure, sorry this is so confusing. So the screengrabs #1 and #4 in the google folder below are not from the Home page, they’re from the pages named “Stone Paper US” (#1) and “Sustainability” (#4). You can navigate to these two pages in the menu on the Home page in the upper right hand corner (website link: http://henry.joshschuyler.com/)
https://drive.google.com/drive/folders/1OaZ81vRlqjurE2UoTsfI-xbycmdeypUq?usp=sharinghttps://drive.google.com/drive/folders/1OaZ81vRlqjurE2UoTsfI-xbycmdeypUq?usp=sharing
Thank you!
Cailley
Thank you for getting back @cailley!
As checked, you’re using the SiteOrigin’s headline widget on header area of your non-home pages. That’s why the previous CSS code won’t work for different selector applies.
Try adding this CSS code:
@media only screen and (max-width: 991px) {
.so-widget-sow-headline .sow-headline {
line-height: auto;
}
}
Regards,
Kharis
