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
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.
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.
What is the purpose of the
margin-right: 100%; rule?
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!