Strange behavior on mobile when site is live, but not in bootstrap preview

Bootstrap Studio Help
1

I'm using hr tags in my design as a black line above my titles. I've recently launched my website and on desktop this works and looks just fine. However, when I check on mobile (IPhone 6s) the hr line is aligned all the way to the left of the page. This does not happen when previewing the website in bootstrap studio.

Does anyone maybe know what is causing this behavior? An example can be found here: https://portrayalmarketing.com/services.html

Thanks!

2

Did you give it settings to make sure it would stay centered on all sizes? If so it looks to me like you didn't reorder your CSS files so that your personal custom CSS file is at the bottom which is what it should be. Try that and that might help some if you have given the HR settings in there.

Also you should always use the browser preview as well as the app's built in preview as every so often there is little anomalies that may not show correctly in the app. When you narrow those down just report them in bugs and they are pretty good about getting those fixed when they can.

If you're not sure on how to reorder your CSS/JS files, just right click over the Styles or Javascript titles in the Design pane and choose usually the last option to reorder the files. The default JS are already set to be the first read, but the rest can be reordered. Same for the default CSS which are already where the need to be so the ones you can reorder are only those you add to your projects yourself.

3

Looks okay on both my desktop and Android phone in Chrome and Firefox. This isn't the first time I've heard of sites rendering unexpectedly on the iphone6.

4

What is the purpose of the margin-right: 100%; rule?

5

I actually managed to fix the issue earlier today. I tried to left align the hr within the div by using the margin-right: 100%; rule, as someone suggested me at the time. For some reason this results in strange behavior on the Iphone 6s. After some digging I found that I can give the hr the attribute align="left" to fix my issue, as described here: https://www.w3schools.com/tags/att_hr_align.asp

Thanks for all the suggestions!