image text is fine on my laptop, sucks on cellphone

[hikingwithu2]

I am experimenting with the w3.css image text options, and have it working very nicely when viewed on my laptop, but then when I view the same page on my cellphone, the image scales properly, but the text just flows down over everything else, it does not scale or change in any way. What is the method for dealing with the image text so it behaves on a mobile device? You can see it at http://wiegand.org/index-test.php

 

Thanks,

Chip

[Ingolme]

That's the problem with using absolute positioning.

 

If you want the image behind the text, set a background-image with CSS.

[dsonesuk]

For support in all browsers:

Use media query to size down the text, use percentages for top property.

 

For support in most browsers ( possibly all browsers now ):

Use vh or vw (font-size: 50vh; or font-size: 70vw; percentage of viewport height or width) which will scale font size to width or height available to it.

[hikingwithu2]

I've never seen vh or vw before, and I've been all through the w3.css tutorial pages and the last time I went through the html tutorial pages as well (that was years ago though) Anyway, here is the code I use for the images -

 

 /* For width smaller than 400px: */
.i1 {
    background-image: url('images/LookingSouthYetmanTrail-400.jpg');
        background-repeat: no-repeat;
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
.i1 {
    background-image: url('images/LookingSouthYetmanTrail-1.jpg');
        background-repeat: no-repeat;
        height: 449px;
}
}

 

So do I add the vh or vw tags into those sections to get the text to scale?

[dsonesuk]

Depends on how you wish to scale the font for different device sizes. You could in theory, set it to default (top styling) then the text should scale to whatever device size. If this does not give correct result you can add extra media queries to cover specific device sizes. 320, 480, 960 for example.

 

see

https://css-tricks.com/almanac/properties/f/font-size/

[hikingwithu2]

Hi, thanks for the reply, this is what I have tried so far -

In the head style section -

 /* For width smaller than 400px: */

.i1 {

    /* background-image: url('images/LookingSouthYetmanTrail-400.jpg'); */

        background-repeat: no-repeat;

        font-size: 2vw;

}

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {

.i1 {

    /* background-image: url('images/LookingSouthYetmanTrail-1.jpg'); */

        background-repeat: no-repeat;

        height: 449px;

        font-size: 2vw;

}

}

And in the body -

<div class="i1">

<div class="w3-display-container w3-text-white">

  <img src="images/LookingSouthYetmanTrail-1.jpg" alt="Tucson Mtns Trail" style="width:100%">

  <div class="w3-display-topmiddle w3-container">

      <div class="w3-xxlarge w3-text-shadow"><p><b>chip wiegand</b></p></div>

        <p class="w3-text-shadow w3-xlarge" style="letter-spacing: 3px;">Welcome to my blog and website, I hope you find something of interest.</p>

    </div>

  <div class="w3-display-bottomleft w3-container w3-opacity" style="font-size: .7vw;"><p>Credit: Photo by Chip Wiegand</p></div>

</div>

</div>

And the text does not resize. But I have only two devices to test on - my laptop and my phone. But resizing the FF window does not resize the text.

 

Oh, BTW, the reason why I changed from loading the image in the head style section to the body is my end-goal - to grab an image at random from a DB, but all the text bits would remain where they should be regardless.

 

I will look at the link you sent me and see what more I can learn from it.

[hikingwithu2]

Hi, thanks for the reply, this is what I have tried so far -

In the head style section -

 /* For width smaller than 400px: */

.i1 {

    /* background-image: url('images/LookingSouthYetmanTrail-400.jpg'); */

        background-repeat: no-repeat;

        font-size: 2vw;

}

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {

.i1 {

    /* background-image: url('images/LookingSouthYetmanTrail-1.jpg'); */

        background-repeat: no-repeat;

        height: 449px;

        font-size: 2vw;

}

}

And in the body -

<div class="i1">

<div class="w3-display-container w3-text-white">

  <img src="images/LookingSouthYetmanTrail-1.jpg" alt="Tucson Mtns Trail" style="width:100%">

  <div class="w3-display-topmiddle w3-container">

      <div class="w3-xxlarge w3-text-shadow"><p><b>chip wiegand</b></p></div>

        <p class="w3-text-shadow w3-xlarge" style="letter-spacing: 3px;">Welcome to my blog and website, I hope you find something of interest.</p>

    </div>

  <div class="w3-display-bottomleft w3-container w3-opacity" style="font-size: .7vw;"><p>Credit: Photo by Chip Wiegand</p></div>

</div>

</div>

And the text does not resize. But I have only two devices to test on - my laptop and my phone. But resizing the FF window does not resize the text.

 

Oh, BTW, the reason why I changed from loading the image in the head style section to the body is my end-goal - to grab an image at random from a DB, but all the text bits would remain where they should be regardless.

 

I will look at the link you sent me and see what more I can learn from it.

[dsonesuk]

You are targeting the parent, while the child element has font-size set also, which as it cascades down (cascading style sheet 'css' ) the child style will take precedence over parent styling, PLUS the parent is using '!important' as well.

<div class="i1">
<div class="w3-display-container w3-text-white">
  <img style="width:100%" alt="Tucson Mtns Trail" src="images/LookingSouthYetmanTrail-1.jpg">
  <div class="w3-display-topmiddle w3-container">
	  <div class="w3-xxlarge w3-text-shadow font-scale"><p><b>chip wiegand</b></p></div>
		<p style="letter-spacing: 3px;" class="w3-text-shadow w3-xlarge font-scale">Welcome to my blog and website, I hope you find something of interest.</p>
	</div>
  <div style="font-size: 12px;" class="w3-display-bottomleft w3-container w3-opacity"><p>Credit: Photo by Chip Wiegand</p></div>
</div>
</div>

Added custom class so it will not affect any other elements using 'w3-xxlarge w3-text-shadow' or 'w3-xlarge w3-text-shadow'

.w3-xxlarge.w3-text-shadow.font-scale {

    font-size: 2.57vw !important;
}



.w3-xlarge.w3-text-shadow.font-scale {
    font-size: 1.66vw !important;
}

Edited July 2, 2016 by dsonesuk

[hikingwithu2]

Yes, before I saw your latest reply, I got it working by adding the font-size attribute to the <p> level, not the <div> level, and now it is working. A little more experimenting with sizes and colors, then the DB code to bring up a random image. Much more fun to come. Thanks for the info.