Responsive Mobile Design looks different on on other devices - html

I have a question for a problem.
I made a Responsive Design for our Shop,
the Problem is when I test the mobile usability and the design (I'm testing with Browserstack)
everything looks fine.
When I'm testing it on my own phone (iPhone cases) it looks also fine even on my htc u11.
But when my boss looks to check on his phone (iPhone 11 Pro) he sees some issues and told me to fix it. I can't comprehend why?
The main problem is the text description.
the SHop Url for this category : https://www.subtel.de/Notebook-Zubehoer/?view_type=grid_view
Here are some screenshots and my html/css
css:
.productinfo_grid_view{
line-height: 16px;
overflow: hidden;
font-size: 13px;
font-weight: 600;
height: 34px;
white-space: normal;
grid-column: 1/7;
grid-row: auto;
margin-bottom: 5px;
margin-right: 5px;
width: 80%;
margin-left: 12%;
}
html:
<span class="productinfo_grid_view">
<a itemprop="url" id="[{$testid}]" href="[{$_productLink}]" title="[{$_sTitle}]"><span itemprop="name">[{$_sTitle}]</span></a>
</span>
as you can see its nothing special,
when you see the screenshots my boss gave me and the screenshot from my phone and browserstack. I'm confused has anyone a hint for me how to solve this kind of problem ?
1st smaller image is the screenshot from my boss the second image is how it should look and how it looks on my phone too.

Looks like you have set a fixed height to your description.
Try removing height: 34px;
EDIT:
or if you want to keep a fixed height and the overflow hidden
Try adding display: inline-block;

It seems like website is Zooming. Please disable zoom on a mobile web page using <meta> tag.
<meta name="viewport" content= "width=device-width, user-scalable=no">
OR
You have to remove fixed height of text description and add text limit for description.

Please update height: 30px; to height: 34px;
.productinfo_grid_view{
height: 30px;
}

Related

Header text fix in safari

I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)

Why is Safari messing with the heights of my div?

I just completed a challenge for FrontEnd Mentor and was texting a friend my demo link to show off/celebrate. But when I went to open the link on my phone I noticed the formatting was all messed up. I've since opened the site on Safari, and the height of the div.selected-plan is getting all messed up.
This is what it looks like on my machine with Chrome.
And the distorted Safari version.
Link to the live site so you can view the html/css.
Why is Safari distorting things and how do I prevent it from happening in the future?
Give below CSS to your SVG I think It Creates height
.music-icon {
margin: 1em;
padding: .25em;
max-width: 48px;
max-height: 48px;
}

Windows 8 IE 11 css not displaying the same as every other brower

![enter image description here][1]So i have created a website that i have tested and it works fine in all major browsers, except for when I am running windows 8. Windows 7works fine but i windows 8 a lot of my css is being affected.
I was wondering if anyone knew a list of things that were different or displayed differently because of this as i really do not want to re write the whole thing!
It appears as though padding might be adding to the height/width properties or something im not quite sure but would appreciate a heads up on any niggly things anyone else has found before i try tearing my css to pieces!
css
.whitebox-index {
background-color: #fff;
max-width: 1044px;
min-height: 1055px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
width: 1024px;
height: 370px;
/*margin-bottom: 10px;*/
position: absolute;
background-image:url(../images/bannerhomebackground.png);
}
In chrome etc this displays as a my white background witha banner at the top and has the even white gap around it but in windows 8 ie this has the 10px gap to the left and top but the right has a 30mm gap.... the width has increased...
I just needed to uncheck "Display intranet sites in Compatibility View" from the Compatibility View Settings menu.
Edit:
Worth noting that this will affect all of your intranet sites. You could alternatively use the x-ua-compat meta tag to set the docmode to Edge. – Jonathan Sampson

CSS Difference on Android 4.4 WebView and Chrome Browser for Android

Trying to implement a style for a WebApp.
It seems that the CSS propery 'line-height' is different in the WebView.
I used this pen as example: http://codepen.io/bbredewold/pen/gGbht
The code is nothing special:
.flip {
position: relative;
width: 100px;
height: 100px;
}
.front {
width: 100%;
height: 100%;
font: 6em arial;
line-height: 100px;
text-align: center;
border: 2px solid #b4b4b4;
}
<div class="flip">
<div class="front">A</div>
</div>
Is this a bug? Or do I miss something?
Any ideas how to work around this? It's a headbreaker...
These are pictures with the differences. Picture 1 is problematic, picture 2 is nicely centered...
(I can't comment the original question, as my score is currently too low)
I realize this is a slightly old question but here goes:
I ran into something similar recently (Android 6, Chrome 55 etc) and I found that some of the Web Settings for WebView can make it interpret the page as if you had used the viewport metatag
<meta name="viewport" content="width=device-width, initial-scale=1">
In order to get the same result in Chrome I had to insert that viewport metatag.

iOS7 Safari - anchor changes width first time it is tapped

I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.