Responsive Design - Text on img background

Asked

Viewed 402 times

-1

I have a website start and I’m trying to develop it into a responsive layout. At the moment the site is like this: http://40kgg.zz.vc/ (temporary domain, only for testing).

For my resolution, in case 1920x1080, the site is perfect, but in smaller resolutions, the paragraph "President", does not maintain the proportion in the font size. Use position:Write in paragraph and position:relative in img Holder. As I did not find a suitable place to store the site online, I upei in the mega so that they can help me better, if they can.

https://mega.co.nz/#! w0VxGKwB! Rfrcrvqkbfghmpyjts0btnn0ijxdkmerqslarklmmka

html css responsive-layout positioning css-font-size

  • Try to use percentages.

  • is already all in percentage :/

  • What is influencing the size of your font and why it does not adapt is the font-size: 7.x em <- (http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/) ; What you could do is use medias queries (css) to satisfy by how much this situation, I’ll leave the link only with css for you to add to HIS css and test: https://jsfiddle.net/Lzsax35q/

  • Take the opportunity to read about modern units of measures: http://developmentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmaxex-ch/

  • See also about Grid in CSS, and give preference to W3schools to learn about these contents: http://www.w3schools.com/css/css_rwd_grid.asp

3 answers

1

If you are going to work responsibly, I advise you to use Grid. I particularly prefer to work with Fundation than with Bootstrap, but this varies according to the taste of each.

With Fundation you can define how each content will be displayed to screen resolution type in a very easy way.

If you prefer to do everything by hand, I recommend using Chrome Developer Tools (Windows F12 key in Chrome) and using the Mobile features it offers to define your break-points and create your responsive CSS.

Good luck on the project :)

1

In fact, the paragraph keeps the font the same way the Nav keeps the font too, the size of your font is not changed based on the screen resolution.

If you want the president text to be resized with the text that exists within "Quality and Elegance", you need the text to be inserted inside the image.

Add the text in the image and remove that paragraph, it will solve your problem and the paragraph will never be outside the image.

You must have separated the text of the image searching for the effect of the Hover I noticed on your site, to achieve this you need to use two images, and instead of changing the properties of the paragraph in :Hover, change the image to the other, as for example:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Source: https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover

PS.: You can also add a transaction to smooth the effect.

0

I believe that the best tool to work with responsiveness would be the Bootstrap, who is responsible for this work.

Another suggestion I have is to always use low resolutions for the development of pages, given that the 1920x1080 resolution you are using corresponds to a small portion of users (I believe I).

For testing I suggest the resolution test options that the browsers themselves have. In firefox: Options > Developer > Adaptive Design Mode.

The way I use is to prepare the site for smaller resolutions, consequently for larger bootstrap will adapt correctly. I hope I’ve helped.

Browser other questions tagged html css responsive-layout positioning css-font-size

You are not signed in. Login or sign up in order to post.