Banner Issues on Mobile

10 replies · opened Jan 13, 2021

SSouthpaw14Jan 13, 2021

Hello,

I've been working with the Canvas template and used the default (index.html) file as my original starting point. After getting FTP access and uploading all of my files the view on my iPhone was somewhat a let down. Knowing the template is responsive I thought it would have adapted better to mobile view. Here's a side by side comparison of Desktop VS Mobile view

• Banner sub-header underneath each <Header 2> doesn't display at all
• Banner text that is stacked on Desktop view is now on a single line in mobile view. Does not seem ideal for mobile view
• Banner Image height doesn't adjust properly and majority of the image (left & right) is cut-off.
• Also trying to make the mobile banner transparent. Thought I found the answer here but not having much luck.

I know this is a long list, I'm mostly concerned about the look of the banner images and banner text. If we can at least solve those issues it would be great. Here is the current website

SSemicolon WebSTAFFJan 15, 2021

Hello,

Thanks for your Patience and Apologies for the Inconveniences caused!

We have checked out the List and Issues you have pointed out and some of them are just Utility Classes that we have applied by default and can be modified easily.

You will notice that the .d-none and .d-sm-block Classes are applied to the Tags in the .slider-caption Element. Simply remove these classes and this text will appear on all devices.
We use Responsive Texts to resize the Headings on Mobile Devices in the Slider for better flexibility. Since these are Customizations, simply use this CSS Code to apply your Custom Font Sizes as required:
[ch_pre type="css"]@media (max-width: 991.98px) {
.swiper_wrapper .slider-caption h2 {
font-size: 5.5vw;

}

.swiper_wrapper .slider-caption p {
font-size: 2.6vw;

}
}[/ch_pre]
Again this uses Utility Classes and can be customized easily using these Utility Classes: http://docs.semicolonweb.com/docs/utility-classes/heights/ . Currently the Classes used are: .min-vh-60 and .min-vh-md-100 on the #slider Element. Simply change the .min-vh-60 (60% of the Viewport Height) to any one of the Available Height Classes according to your needs. The Background uses background-size: cover; CSS Property to best fit the Images in the Available Area. You can change the Height first and see if this works for you, else you can change the Background Size according to your needs.
Transparent Headers on Mobile Devices is not supported currently, but we are constantly working on this and will release an Update once there is a proper solution that works best across devices.

According to your Issues, we would highly recommend you to familiarize yourself with the Bootstrap Utility Classes: https://getbootstrap.com/docs/4.5/utilities/ and Canvas Utility Classes: http://docs.semicolonweb.com/docs-group/utility-classes/ for better understanding of how everything works. This will really help you in creating some very responsive layouts.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSouthpaw14Jan 18, 2021

Thank you for your reply! Going to revisit the code today or tomorrow. Problems have compounded now that Dreamweaver is giving me issues with the 3 x JavaScript files. It's frustrating! Copied all the HTML and CSS files I used but kept the JavaScript files pointing to the original downloaded template files. Which was fine because I don't know much about JS and would not be changing anything at all.

Before uploading online I went to re-point the JS files in Dreamweaver to my root HTML folder. The files are exactly the same as your template I even checked date modified to make sure I didn't mess up a file. Everything matches

You guys have any experience with Dreamweaver JS issues like that?? After re-pointing the files it now somehow creates duplicates of each JS file. Plus when I launch the live preview in a browser the JS doesn't function properly and text doesn't even load. So like I mentioned compounding problems. Attached a snap to show what I mean in DW. The JS files all preview fine too if I click on each they seem to show the Javascript.

Sorry to ask another question it's just been frustrating working in DW for a while without issues and since changing the file location nothing but issues. But it's correct seeing it works when I upload the files to the FTP. Definitely an issue with DW

Even tried deleting/recreating the Site under Site Mgmt. Tried updating DW too

SSemicolon WebSTAFFJan 18, 2021

Hello,

We do not recommend using Visual Editors as they add Custom Codes to the Templates making them bloated and unusable. We do not work with Dreamweaver and also do not make our Templates compatible with any particular editor. The best way to Edit Canvas is by using Visual Editors. We mostly develop using VS Code or Sublime Text along with using Live Reload for Browsers for better compatibility and no adverse experiences.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSouthpaw14Jan 18, 2021

Great thank you for the info! I'm actually a graphic designer, so I'm still a learning developer. This is the first site I've tried building for my work using all code, and my introduction to Bootstrap. I've done enough code that I get by, but learning more as I go. Your templates have certainly helped! I'll be in touch

SSemicolon WebSTAFFJan 18, 2021

Hello,

We absolutely understand. Very happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have a Great Day and Stay Safe.

SSouthpaw14Jan 20, 2021

Hello,

I may have to stick with Dreamweaver for now, at least the in-app preview seems to render the JavaScript mostly correct. REALLY not sure what I am doing wrong! ahh! Took your advice and downloaded Visual Studio code. After installing I opened my site folder as "new folder" and it seemed to read all files correctly. Next was trying to figure out to launch a preview, which I was having trouble with.

Then found this plugin and set it to Chrome in the Settings > View in browser config. (snap attached)

Yet the same exact issue seems to happen with the JavaScript not loading correctly, or maybe at all for a specific file. Is there a specific file that might be causing the issue? Strange how everything is fine on the versions I upload to the FTP, which "should" make it seem the code is all correct. Which doesn't help me understand the issue any better! oi

Screen recorded the process within VS-Code and how the browser results are getting fudged up.

SSouthpaw14Jan 20, 2021

¡Eureka figured it out! Thank goodness because it was getting frustrating! Launched one HTML file in Dreamweaver and deleted the "src=" one by one and then re-typed each file in. Dreamweaver, as it did before which wasn't helping my confusion, would auto-fill the rest of filenames for me showing it could clearly see the files. However this time when typing the path I excluded the initial forward slash "/" and it worked! Even with DW the animations started occurring. Saved, closed, then re-opened the file and now works in Dreamweaver's preview, device preview and the duplicate JS files are now gone!

Still don't understand why that made such a difference, but I'm happy at least my first (and largest) problem is solved! Very excited! attached a snap showing the code before & afterwards.

SSemicolon WebSTAFFJan 21, 2021

Hello,

Thanks for your Patience!

Glad the issue was resolved. The Forward Slash before the Files makes the Browser look for the Files from the root, which makes the Path absolute rather than relative. This could cause issues in DEV Versions as DW can't find the absolute path of the Files.

Thanks for running tests on this. We recommend using relative paths and if using absolute paths, simply use the Full URLs. Example: https://www.your-websites.com/js/functions.js File. Chances of errors when using this approach will be very less.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SSouthpaw14Jan 22, 2021

Thank you! Yes the more I looked into it I was reading about relative paths. The problem was I was trying to keep the files ready for FTP upload as well, and if I changed them to my full C: drive address that might have fixed my local issue but pretty sure they would not work when uploaded to the FTP. It's funny how the files on FTP still worked fine regardless of the preceding "/"

Either way I appreciate **ALL **the extra help you provided! Really stepping out of the "Canvas" lane and helping me with other issues. top marks!

SSemicolon WebSTAFFJan 22, 2021

Hello,

Very Happy to Help!

Yes, of-course placing the C:/ Drive Absolute Addresses will cause errors on the FTP. And this is why we use relative paths in the Package. So that you can make the Path Changes if required, once you upload the Files to FTP. Unfortunately, this is a drawback of using HTML Templates.

FTP works as the public_html Folder is considered as root. So we recommend changing the Paths and add a Forward Slashes /js/functions.js for the Files, once you upload the files to FTP, so even if the HTML Files are placed in a Sub-Folder the assets will always get loaded from the root.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard