alignment of text and image

Asked

Viewed 122 times

1

html css mobile

  • Set mobile phone.

  • Another thing, the page is PHP but you did not put this option in the tags

  • with at most 540px lagura that’s what I call the mobile phone @Leocaracciolo

  • Use bootstrap in your project to make it responsive more easily. http://getbootstrap.com/ Just follow this example here: http://jsfiddle.net/PKVza/2/

  • Is that what you want? Test with desktop and mobile http://kithomepage.com/sos/quem-somos.php See this solution in my answer

2 answers

1


With a simple Javascript we can have the expected result.

Just replace the line

<div class="produto_em_destaque" style="display: flex;width: 100%;">

by that javascript

<script>
    if (screen.width<540){
        document.write('<div>');
    }else{
        document.write('<div class="produto_em_destaque" style="display: flex;width: 100%;">');
                }
</script>

  • still not giving

  • You tested using http://kithomepage.com/sos/quem-somos.php Desktop and mobile with 540px max? My phone worked! went down the image and on the desktop stayed above the image.

  • All right I was testing the reponsivity on the pc and I could not but dps passed to the Mobila and already gave obg

0

Use Media Screen to use a specific CSS for the width you want. Example:

@media screen and (max-width: 540px) {
  img {
    display: block;
    width: 100%;
  }
  span {
    width: 100%;
  }
}

Remember that the code needs to be below your CSS used in desktop view.

Source

  • i already use the media screen my problem is to be able to align the text below the image

  • If you use display:block and width:100% in both elements, text and image, will work.

Browser other questions tagged html css mobile

You are not signed in. Login or sign up in order to post.