Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 30, 2019 at 11:29 am #1095716
    transformmedia

    I am building a website for a client of mine. I am not a professional webdesigner. You can find the site here:

    http://my-transformance.de/ (login in private content)

    On my screen everything looks perfectly on place. I used css to place the texts where I want it to be. But I didn’t have in mind that it may looks different on other screen resolutions. How can I ensure on every screen size it looks the same?

    I hope there is a good solution for that and you can help me.

    Best regards,
    Tobi

    May 1, 2019 at 7:58 am #1096062
    Rikard

    Hey Tobi,

    I’m not sure what you are referring to, could you try to explain a bit further or post screenshots of the problem?

    Best regards,
    Rikard

    May 1, 2019 at 11:10 am #1096144
    transformmedia

    Hey Rikard,

    I used css-code like these for example:

    .text1-startseite {
    margin-top: -200px !important;
    }

    .headline2-startseite {
    margin-top: 250px !important;
    }

    .overlapping-image-startseite {
    margin-top: -720px !important;
    }

    So that the picture of the speaker, the texts, the buttons in the header area are located where I wanted it to be. It looks good on my laptop screen size, but when I test the site on other screen resolutions with bigger or smaller resolution it looks destroyed. The picture of the speaker is too high, the head is cutted, the texts aren’t where they are supposed to be.

    For example: http://whatismyscreenresolution.net/multi-screen-test?site-url=http://my-transformance.de/&w=1024&h=768

    And it absolutely makes sense because I just used css so that it looks nice on my screen resolution. I am just asking what way do I have to go to ensure that it looks nearly the same on every screen resolution? I don’t know how to solve this problem.

    Can you help me? I would really appreciate it!

    Tobi

    May 2, 2019 at 6:59 am #1096360
    Rikard

    Hi Tobi,

    Yes, that will likely happen if you use pixels values like in your code. You can have different code for different screen sizes using media queries though, here’s an example which will target mobile phones in general:

    @media only screen and (max-width: 767px) {
  your screen specific CSS goes here
}

    Best regards,
    Rikard

    May 8, 2019 at 9:15 am #1098374
    transformmedia

    Hey Rikard,

    thank you for your answer. I am a little bit overwhelmed. It’s just about the first part of the homepage from the header to the video. I used a lot of pixel values there. And it seems like a lot of work to define it seperately for every single screen size… I mean I am not talking about the mobile version since I didn’t cared about it yet, but about the different laptop and desktop screen sizes.

    Is there another way to do it because you said that happens when I use pixel values. Can I use different values? How would you go about this problem? The first half of the homepage should look like here: http://whatismyscreenresolution.net/multi-screen-test?site-url=http://my-transformance.de&w=1366&h=768

    When I try bigger or smaller screen sizes the buttons aren’t in the blue area anymore or the quote is not below the blue background area, or the space between video and text above is way too big…

    I don’t know much about html or coding (I am currently starting to learn it). Can you help me out here? How would you do it?

    I really appreciate the help here! I hope in the future when I learned more about CSS I don’t need to ask so much questions here anymore :)

    Best regards,
    Tobias

    May 9, 2019 at 4:40 am #1098715
    Rikard

    Hi Tobias,

    There is no simple solution for that unfortunately, but following up on my first message; it might be better if you only applied your CSS for desktop screens? If so then you can try to place your code within this media query:

    @media only screen and (min-width: 1024px) {
  desktop specific code goes here
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.