Home>

From the client, it seems that the indentation shift when displaying on the PC and the image display when displaying on mobile are scaled, and when I checked the browser being viewed, it seems to be chrome (There is no indentation shift in Safari, the image It seems that it is scaled.) I also check it with chrome and raise it on the confirmation server and adjust it, but with the chrome I see, the indentation shift and the image do not feel strange Since it is displayed, I am wondering how to adjust it.

(1) Basically, it is implemented using chrome.

The confirmation URL isxs746401.xsrv.jpI uploaded it to the server and confirmed it.

(2) The places you would like to see are the second layer partner.html and the third layer partner.css from the metal and metal processing factories.
(3)-(5) Problems with the p tag in main

I want to break away from dependence on sales to specific customers


I can't cultivate new customers


Indent this part on line 279 of partner.css
.left-txt p: nth-of-type (2) {
color: #fff;
font-size: 22px;
padding: 0 24px;
line-height: 1.4;
text-indent: 7px;
}
And line 286
.left-txt p: nth-of-type (3) {
color: #fff;
font-size: 22px;
padding: 0 22px;
line-height: 1.4;
margin-top: 16px;
text-indent: 9px;
I am adjusting with text-indent, but I can not confirm the indentation deviation with my confirmation URL and chrome, and it is said that the client is not.
⑥ I would like to correct the text misalignment with the client's chrome, but since the indentation is exactly correct on my PC,
I would like to know how to adjust it.

(Capture)
What I tried
I tried to adjust the indentation, but when I checked it with two PCs different from my own PC, the indentation was not misaligned, so I was not sure if I was wrong or the other party. I don't know what to do and I'm still wondering what to do.

* And I have an additional order
Mobile screen partner.css: 1046th line
@media (max-width: 768px)
partner.css: 1046
.root img {
margin-bottom: 90px;
margin-top: 60px;
width: 40%;
height: 258px;
}
The image here seems to be scaled, so please adjust it.
This is also displayed without any discomfort in the confirmation URL and chrome.
If i erase the width and height, the image size will be large.
The width and height are specified.

By trying
I've been asked to change the width and height% and px in detail, but I'm still worried about what to do because it is said that the magnification is variable.

⬇️ The chrome that the client is looking at

⬇️ chrome i am looking at

⬇️ Image i am viewing on mobile

  • Answer # 1

    First, about the fact that the left edges of the text below in the first question are not aligned.

    <p>▪ I want to break the dependence on sales to specific customers<br></p>
    <p>▪ Can't cultivate new customers<br></p>

    ▪ ▪I am trying to align the right edge with double-byte space, but the width of each character differs depending on the font. Font-dependent implementations should be avoided, as the environment may not always have the same font as the development environment.

    A common method is to use pseudo-elements to display marks. For example, the following may be helpful.

    Various sample list marks expressed without images | Tips Note by TAM

    Next, about the phenomenon that the image is crushed on the mobile display.

    Current CSS

    .root img {
      margin-bottom: 90px;
      margin-top: 60px;
      width: 40%;
      height: 258px;
    }


    The reason is that the width of the image is set to 40%, which is a relative value, and the height is set to 258px, which is an absolute value.
    Since the width changes according to the screen width while the height is fixed, the aspect ratio changes.
    It's a good idea to fix the width according to the aspect ratio of the image.

    Modified sample

    .root img {
      margin-bottom: 90px;
      margin-top: 60px;
      width: 122px;
      height: 258px;
    }