-2

I'm trying to make a website for my friend's company and I did but it only looks good on desktop computers. On the phones and tablets looks really bad. I was doing so much research but couldn't find how to use fluid layouts or any other way. On some phones, divs just position in weird places and on some other phones they just look very small or cover the whole screen. And I have a white space on the bottom of the page(on phones). Here is a link so you can take a look: http://agrofit.hr/ p.s. it is on Croatian but you don't need to read :-))). Please help as soon as you can. Thanks!!!!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • 3
    You should look into responsive layouts and how to use media queries. Your ask is unfortunately too vast for a quick fix. – Gurtej Singh Mar 28 '17 at 13:02
  • That is why im asking. I dont know how to use them –  Mar 28 '17 at 13:03
  • 1
    You could use media queries:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp or a framework like Bootstrap: https://v4-alpha.getbootstrap.com/layout/grid/ – Arjan Knol Mar 28 '17 at 13:04
  • Thank you for the links i will try –  Mar 28 '17 at 13:04
  • 2
    Well there are tons of places on the internet from where you can read and learn. Let Google be your friend. – Gurtej Singh Mar 28 '17 at 13:05
  • I wouldnt be asking if i could find it –  Mar 28 '17 at 13:09
  • 1
    https://www.w3schools.com/bootstrap/ , https://www.w3schools.com/css/css_rwd_mediaqueries.asp . Tutorials from w3schools on bootstrap and media queries – Oke Tega Mar 28 '17 at 13:11

3 Answers3

1

You should read on css media queries and responsive layouts. You could also check out responsive frame works like bootstrap

Oke Tega
  • 850
  • 10
  • 21
  • start over using a bootstrap template :( – brad Mar 28 '17 at 13:04
  • you can download a nice responsive template for free and have it installed in less than 10 minutes. They have templates that look a lot like your site. I know its not what you want to hear but thats my 2 cents worth – brad Mar 28 '17 at 13:12
  • i know what is bootstrap i have it on the page but for the template i have to start over.... –  Mar 28 '17 at 13:12
  • If you used bootstrap for the page, you probably didn't use it right. The page should be responsive already. – Oke Tega Mar 28 '17 at 13:15
  • i did use it but not to make a page responsive but to put some elements to the page –  Mar 28 '17 at 13:16
  • There's a lot to read on for your website responsiveness. Bootstrap is just one of them. You could try using `%` for your measurements for example so it occupies `100%` or `90%` of any % of screen size. Just a tip – Oke Tega Mar 28 '17 at 13:19
  • Do u know how i can test how it looks on mobile without publishing –  Mar 28 '17 at 13:24
  • If you using the google chrome browser, you could use the developer tools. It has demo viewport for almost all phones. right click->inspect element->ctrl+shift+M (on key board). If you look at the toolbar up there is a drop down menu to select different devices to see you website in – Oke Tega Mar 28 '17 at 13:34
  • thank you soo much u saved me from publishing constantly :-) :-) –  Mar 28 '17 at 13:46
1

Try using percentage measurements instead of pixel measurement's.

For example:

.example {width: 100%}

rather than:

.example {width: 700px}

Also as mentioned above use some CSS Media Queries.

So for example:

@media screen and (max-width: 700px) {
img {width: 200px}
}

This says that whenever someone is viewing on a device with a screen smaller than 700px, the image will be 200px.

Hope this helps.

[Edit] To Test Your Site On Mobile -

1) Open the webpage you want to test in Chrome.

2) Right click and click 'Inspect'

3) Then a grey window should appear either at the bottom of your browser or the right hand side of your browser.

4) At the top left corner of the new grey window there will be a two buttons, click the one that says "toggle device toolbar"

Toggle Device Toolbar Icon

You can now select different devices and see how they appear in each.

DM98
  • 83
  • 6
  • Hi and tnx and one more question because u probably know it –  Mar 28 '17 at 13:18
  • how to test how it looks without publishing –  Mar 28 '17 at 13:18
  • Hi Ian, It depends what CMS you are using. WordPress has a 'Preview' function built in. Also try checking your hosting control panel as most have a 'Preview Site' function built in. – DM98 Mar 28 '17 at 13:28
  • I am coding on brackets and notepad++ and there is no mobile preview option and publishing on filezilla –  Mar 28 '17 at 13:31
  • @IanPETEK Ah i'll update my original answer for how to perform mobile testing in Chrome. – DM98 Mar 28 '17 at 13:43
0
div {
    font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
    line-height: 115%;
}

That seems to work. I tested on Chrome with Inspect's device profiles.

jobechoi
  • 69
  • 6