2 different design for computer, and for mobile

HTML-CSS
#1

Dear sir/s, I have the following let’s say (iframe1):

iframe src="h…_/iframe

this is for computer looking (computer operating system).
there is another iframe (let’s say iframe2):
iframe </iframe

this is for telephone (android, ios) os
so, the website would be appear in 2 different looking, 2 different designs, first for computer, second for mobile.
The question is: Now I have to put the 2 codes above in one webpage (index). In case that I would put both of them, of course, both of them would be appear in page. now I have to put a code telling that, (if… the os is for computer… then go to frame1, if the os for mobile then go to frame 2

if you open this website in computer, it would be appeared in determine design. and try to open by telephone, it would be appears another design.

be a ware, I’m not talking about adoption between computer and telephone size, I’m talking about 2 different design.
unconformity for security reasons I couldn’t show the link
regards

#2

Sounds like you’ve already got something written. Now use media queries to determine device size and if it’s computer size use display: none; to hide the class with the phone sized code and vice versa when you want to hide the computer size class and have phone code display.

#3

Yes, that is write, the 2 designs has been already prepared, the only think that i have to do is just for allow one design to be in compute, another to be in mobile. i have to write this code. but I don’t know how?

#4

how to use media queries

#5

I don’t get it, please help me

#6

My post provides a link about media query usage.

If you want to show what you’ve tried I can help you. I’m not going to write it for you though.

#7

I could write, but its not appear in the text for security reasons
pleasse give me email I will send you

#8

If you have codepen, provide a link to your pen, just leave off the protocol

With the bots (and users) that pour over forums I don’t provide my email. I don’t need any additional spam. Hope you understand.

#9

ok, I get it
now this code is for computer:

<iframe src="https://iframe.bussystem.eu/booking?lang=en&partner=2172&no_akce=1" frameborder="0" marginwidth="0" marginheight="0" width="750px" height="2000px"></iframe>

this code for mobile:

<iframe src="https://booking.bussystem.eu/en?partner=2172" frameborder="0" marginwidth="0" marginheight="0" width="700px" height="700px"></iframe>
#10

I need to put this in one page, if its open by computer then go to first code, if its open by mobile then it would go to second code

#11

Add a class or id to the two elements, then add media queries in your css to show one or the other based on screen dimension

1 Like
#12

nice info that I cn ot ignore

1 Like
#13

yes, could you give me details about this, please …I don’t understand, how to make media queries and add id.

#14

If you don’t know these things you would really benefit in spending a few hours in doing the html/css course in the FreeCodeCamp curriculum

You can read about media queries here:

#15

ok, I’m ready to spending many hours in this exactly question

#16

Yes…and getting the same responses.
If you wrote the HTML and CSS for the two pages you provided

then it won’t take you long to figure out how to write media queries. I provided you with a link and so did @ilenia if you need instruction.

Good luck. Happy coding!

#17

please Mr. Roma, help me, I a read the link that you sent me, as I understood, I should add to my stealsheet (css), the following:

@media screen, { ... }

and should put the iframe between brackets.
ok, but there no media smartphone, or media windows …

#18

@saifmahmmod You have to define the screen dimensions (i.e min-width, max-midth, , etc.) yourself for what you define as a smartphone or a desktop device.

One word of caution here regarding showing something “different” for mobile vs. desktop. Search engines like Google can penalize your search rank when the information is different for when viewed on a mobile device vs. a desktop. It is one thing to move things around and hide a few large icons, but if you actually show completely different information, then your ranking could suffer. It is fine to format (font size, positioning, etc.) the information differently, but an entirely different thing to remove/add certain information depending on screen size.

1 Like
#19

Dear sir/ thank you for you answer, actually may be there is misunderstanding. the website that I made is saif-tickects .com is just as affiliate program, I took from another website, the website that gave me these 2 different design, and there is no help for how to this. so I should do by myself, one for computer, one for smartphone. I don’t know how, and I read regadrs css media screen, but I don’t understnd it
please help me

#20

please, I read it, but I couldn’t do this, please help me