Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Ask for help from web programmers, my code problems
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

Ask for help from web programmers, my code problems

juhuaxinjuhuaxin Member
edited November 2018 in Help
<a style="position:fixed;bottom:0px;left:0px;right:0px;text-align:center;" href="link">     
    >    <img style="display: inline-block;"   width="600" height="150"  src="pictures linking" />    </a>


<a style="position:fixed;bottom:0px;left:0px;right:0px;text-align:center;" href="link">     
    >    <img style="display: inline-block;" max-width="100%" max-height="100%"  src="pictures linking" />    </a>

There is no problem with the above code on the PC side. The picture will float at the bottom and be centered. The two sides are transparent, but the mobile browser is not good. The picture only shows the left part, but the right part does not show. How to modify it? I want the PC and the mobile picture to adapt automatically at the same time.
Or,
Let this picture only be displayed on the mobile phone, not on the PC, because there are more visitors on the mobile phone, so PC visitors can be ignored.
Is there such code?

Comments

  • I suspect this is because, your picture is too big for mobile browser. Please consider using the html 5 element to add responsive images and your thing should look better.

    Thanked by 1ConnorEllington
  • I meant html5 picture element.

  • armandorgarmandorg Member, Host Rep

    Use some codepen ... etc. So we can take a closer look.

  • @hammer said:
    I suspect this is because, your picture is too big for mobile browser. Please consider using the html 5 element to add responsive images and your thing should look better.

    Yes, it's wider than the mobile screen.

  • You can use media queries since you are not using any framework. Basically you say what happens when the screen is size x then you want to resize the img etc.

    It is kinda easy to learn and implement. Just need to google it

  • max-width="100%" max-height="100%"

    what is this abomination?

    did you mean:
    <img style="display: inline-block; max-width:100%; max-height:100%;" src="pictures linking" />

  • Can I introduce you to external css? @juhuaxin

    Thanked by 1jetchirag
  • bradelbradel Member
    edited November 2018

    I also think that it's because you have a picture that has much higher resolution then mobile browser can show. And using codepen.io or assignment help you can show your problem in more detail and get a solution, or at least advice on your task.

  • deankdeank Member, Troll

    External wss is what he needs.

  • @deank said:
    External wss is what he needs.

    Trust me, internal WSS is the best.

Sign In or Register to comment.