The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Css for mobile - Android j1 mini prime
tudsy
post Oct 31 2018, 12:14 PM
Post #1


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



Hi

I am trying to get working css on mobile. I am testing on the j1 mini prime (4 inches screen size) Android browser.

The css is in the attached file.Attached File  art.txt ( 230bytes ) Number of downloads: 858
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Oct 31 2018, 12:18 PM
Post #2


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



QUOTE(tudsy @ Nov 1 2018, 02:44 AM) *

Hi

I am trying to get working css on mobile. I am testing on the j1 mini prime (4 inches screen size) Android browser.

The css is in the attached file.Attached File  art.txt ( 230bytes ) Number of downloads: 858


Attached File  ecovib2dsart.txt ( 17.41k ) Number of downloads: 782
The main file has been attached.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 31 2018, 12:30 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And what problem are you seeing?

Anyway, that style sheet shouldn't work in any browser because you have mixed HTML with CSS.



CODE

<style type='text/css'>




@media screen and (max-width:500px){

body{
          height:30px;
          width:30%px;
}
}

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


body{
           height:100px;
           width:100px;
}
}

</style>


The STYLE tags are HTML. They are used with an embedded style block in a HTML page. In a linked style sheet you can only have CSS.

Setting a fixed height for BODY seems strange. And in the rule for max-width:500px you have used double units, 30%px. Anyway, 30px height, that's about the height of this smilie => wub.gif . I don't think you want the page to be that small.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Oct 31 2018, 12:54 PM
Post #4


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



QUOTE(pandy @ Nov 1 2018, 03:00 AM) *

And what problem are you seeing?

Anyway, that style sheet shouldn't work in any browser because you have mixed HTML with CSS.



CODE

<style type='text/css'>




@media screen and (max-width:500px){

body{
          height:30px;
          width:30%px;
}
}




Hi

Thanks for that.

I am seeing the full web page on the mobile phone. That is, the unscaled page.

Thanks.

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


body{
           height:100px;
           width:100px;
}
}

</style>


The STYLE tags are HTML. They are used with an embedded style block in a HTML page. In a linked style sheet you can only have CSS.

Setting a fixed height for BODY seems strange. And in the rule for max-width:500px you have used double units, 30%px. Anyway, 30px height, that's about the height of this smilie => wub.gif . I don't think you want the page to be that small.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 31 2018, 04:50 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(tudsy @ Oct 31 2018, 06:54 PM) *



Hi

Thanks for that.

I am seeing the full web page on the mobile phone. That is, the unscaled page.

Thanks.

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


body{
height:100px;
width:100px;
}
}



You mean max-width, not min-width, right?

Maybe you could explain what you want to accomplish? From your CSS and what you've said I get the impression you want a tiny bit of your page to show and everything else to be cut off.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tudsy
post Nov 1 2018, 07:39 AM
Post #6


Advanced Member
****

Group: Members
Posts: 246
Joined: 30-September 14
Member No.: 21,611



QUOTE(pandy @ Nov 1 2018, 07:20 AM) *

QUOTE(tudsy @ Oct 31 2018, 06:54 PM) *



Hi

Thanks for that.

I am seeing the full web page on the mobile phone. That is, the unscaled page.

Thanks.

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


body{
height:100px;
width:100px;
}
}

Hi

Thanks for that.

I want to accomplish a web page (ecovib2dsart.php) to fit on the j1 mini prime phone.

Thanks.



You mean max-width, not min-width, right?

Maybe you could explain what you want to accomplish? From your CSS and what you've said I get the impression you want a tiny bit of your page to show and everything else to be cut off.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 1 2018, 11:52 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You would. There's a property called overflow that decides what should happen with content there isn't room for. The default value is 'visible', which means he content will overflow the box it's in if it's too small. You can change that to 'overflow: hidden'. But it still won't work with BODY because BODY is special.

If you put a DIV inside BODY and put all content inside it and then apply the CSS to that DIV instead of to BODY it will work as you say you want it too. Only I don't think that's really what you want. What's the use of seeing a tiny part of a webpage?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:04 AM