• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Site works great on Mac. But is different on iPad and iPhone

Participant ,
Jan 19, 2022 Jan 19, 2022

Copy link to clipboard

Copied

Does anyone have a clue why some of the features on this site do not work on iOS? At issue is the background image in the quote section and the counter section. On the Apple mobile devices the background image is blurred and/or darkened. I am using a purchased template (support is not responding) and editing the code in DreamWeaver. I am no expert. But I suspect a number of the .js files have errors in the code because when opened in DreamWeaver, the text color in these files turns white midway through the end. Errors exist in a couple .css files too. I can't figure out the glitch in the code and cannot find a source for a clean (or updated?) version of these files. I'm attaching images of the screens in question (from iOS) and how they should look (from my Mac). 

And here is the list of filenames (.js and .css, some plugins) that I am suspect have errors(?). Again, not my expertise. 

font-awesome.min.css

animated-headline.js

bootstrap.min.js

form-contact.js

isotope.pkgd.min.js

jquery.inview.min.js

jquery.min.js

jquery.ripples-min.js

jquery.stellar.min.js

lightbox.min.js

main.js

modernizer-2.8.3.min.js

owl.carousel.min.js

scrolltopcontrol.js

slick-nav.js

wow.min.js

animated-headlines.css

bootstrap.min.css

Site: https://rosaryonmyheart.com 

IMG_2109.PNGIMG_2110.PNGScreen Shot 2022-01-19 at 3.33.20 PM.pngScreen Shot 2022-01-19 at 3.33.36 PM.png

Thanks in advance! 

Views

271

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 26, 2022 Jan 26, 2022

If you don't want to do updating or managing all the plugins of a hosted CMS, there are solutions like Wix/Squarespace that do it all for you. The cost of those could end up being more than a basic shared hosting plan though if that is all you are using.  With that said, while DW is not in its prime and is arguably in need of an overhaul, I don't think this is about moving away from a dying application because we could offer you more modern web development tools, but most are no longer focused o

...

Votes

Translate

Translate
LEGEND ,
Jan 19, 2022 Jan 19, 2022

Copy link to clipboard

Copied

I dont have an iphone or ipad (I'm poor) BUT I think they still do not support the css background attachment fixed property or only partially support it in Safari browser.

 

https://kriesi.at/support/topic/ios-do-not-support-fixed-backgrounds/

 

Try setting the background attachment to 'scroll' for mobile devices.

 

Add the <style> </style> block of code (see below) to your page AFTER the link to your main css stylesheet, like:

 

 

<link href="css/style.css" rel="stylesheet"/>

 

<style>

@media screen and (max-width: 768px) {

.cta_section{

 background-attachment: scroll;

}

}

 

@media screen and (max-width: 768px) {

#counter_area{

background-attachment: scroll;

}

}

</style>

 

 

You won't get the nice effect that you do on desktop, where the background images remains static, but it might work better on iOS mobile devices.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

Thank you Osgood. This is helpful. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 19, 2022 Jan 19, 2022

Copy link to clipboard

Copied

Holy script-fest, Batman!  Did you do this or did it come this way?  Getting that smorgasbord of outdated scripts / widgets to work right in modern devices will be like rearranging deck chairs on the Titanic. Some of those scripts have been discontinued for 7 or more years.  It's not surprising the code is broken.

 

My advice would be to rebuild this project in WordPress with a premium Bootstrap Template.  Even WordPress with all its baggage would be more streamlined than what you have now.

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

quote

Holy script-fest, Batman! 


By @Nancy OShea

 

It's not excessive by todays standards, its fairly normal, even I'm now breaking my scripts and css up into smaller chunks/files as its easier to manage............if you cant beat em, join em.....although a lot of 3rd party scripts will be carrying a lot of redundant code, of course!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

Agreed that it's not excessive. In fact it's better than a lot scoring 89 on desktop and 59 on mobile from lighthouse for performance.

 

Also agreed that the background-attachment does not work on iOS still.  However, I am debating about the impact of the graphic not being seen on iOS.  From an accessibility standpoint the counter numbers over the sunset background can be difficult to read and would probably fail an accessibility test. So the fact that the background darkens on mobile over those numbers may actually make the page more accessible and easier to read. Even your own logo at the top can be hard to decipher with the dark red over the dark gray background at its current size.  I would definitely consider some of this styling as you work to have a background image on the mobile layout.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

I happen to agree about the 2 background images, although they don't work as expected on iOS I don't think its something to worry too much about as it may even be beneficial in providing more clarity for the text overlaid. 

 

This is where you need to make decisions. Are the 2 background images even needed on mobile devices as they will drain the users band width, they could be replaced with just a solid color.

 

Maybe just use the 'supports' css tag, iOS will get the solid color while other mobile devices which support background attachments will work as expected.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

<shaking head> The overlap is overkill.  And Lighbox 2 is ancient. </shaking head>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 20, 2022 Jan 20, 2022

Copy link to clipboard

Copied

quote

<shaking head> The overlap is overkill.  And Lighbox 2 is ancient. </shaking head>

 


By @Nancy OShea

 

Oh well that's the way it is now days, a free for all, with different opinions........why I'm distancing myself from what has become a bit of a mostly unskilled, anything goes profession, so long as it's cheap and cheerful, that'll do. No one thinks web-developement is skillful anymore, do they, unless you happen to work for a multi-millon dollar company or high end web-agency...........the rest are just bottom feeders and dreamers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

I'm no pro. Entered survival mode after layoff in another industry during a recession. I'm just more comfortable at this stage of my life with Dreamweaver used in schools, and don't like the backdoors in Wordpress that require diligence to updating. I've never met a Wordpress site I liked and back when I used Dreamweaver for food money, the hardcoded sites lasted a good long time. Support here is recommending a move to Wordpress (above). Interesting. I have to ask, then. Is there a platform (like Shopify for ecommerce) that provides the backend updating needs automatically so I wouldn't have to do those updates if I created a site using said platform? I'm not building sites that much anymore. My sites are few and tiny these days. No charge. Just trying to help folks in need like myself. Not a pro. I'm getting quite a shellacking here. I'm sorry I have never graduated from beginner. Open to trying something else, but switching to Wordpress from Dreamweaver is a route I have always been reluctant to do. I evaluate every three years and always stick with Dreamweaver. The techs at hosting company say the same. My sites are so small and few. Perhaps I am sticking with a dying application? Am I correct that this is the suggestion here? To move away from Dreamweaver to Wordpress? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

quote

Is there a platform (like Shopify for ecommerce) that provides the backend updating needs automatically so I wouldn't have to do those updates if I created a site using said platform?

==========

WordPress with the Woo Commerce plugin will give you what you need to maintain your site, product catalog & shopping cart from one online dashboard. And it supports various currencies & payment gateways.

https://wordpress.org/plugins/woocommerce/

 

And the Elementor plugin for WordPress provides drag & drop ease of use for creating your WordPress site.

https://wordpress.org/plugins/elementor/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

If you don't want to do updating or managing all the plugins of a hosted CMS, there are solutions like Wix/Squarespace that do it all for you. The cost of those could end up being more than a basic shared hosting plan though if that is all you are using.  With that said, while DW is not in its prime and is arguably in need of an overhaul, I don't think this is about moving away from a dying application because we could offer you more modern web development tools, but most are no longer focused on visual development and have more of a code/development focus which is not the direction you are looking to go down. Most editors have gone in this direction as the Wix/Squarespace's of the world have come into the visualization/no-code space better than Adobe's attempt with Muse.

 

Personally speaking if you are trying to keep things simple, I would recommend to go back to the client and tell them that the mobile image is not supported that they are looking for and development to get that added would be more than what it's worth. Then you can keep using DW as you are.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 27, 2022 Jan 27, 2022

Copy link to clipboard

Copied

LATEST

Thanks Ben. The client was fine with the iOS issue. It was me who wanted it to look right. And I don't build ecommerce sites as I think I may have misled Nancy above. Moving forward, I've decided to stick with Dreamweaver and look for cleaner options in the future should I have that need. I do prefer working directly in code. Probably the best thing would be for me to study some tutorials provided with my subscription to limit my reliance elsewhere. 

 

Thanks everyone! Problem solved.  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 25, 2022 Jan 25, 2022

Copy link to clipboard

Copied

As @osgood_  has said, background images do not work well on mobile devices. Personally I would not worry about that, users are mostly out to get information, not to admire the quality of background images.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines