Responsive Design - Text on img background

Navigation
-1

I have a website start and I'm trying to develop it in a responsive layout. At the moment the site looks like this: link (temporary domain, just for testing).

For my resolution, in the case 1920x1080, the site is perfect, but in smaller resolutions, the paragraph "President", does not keep the proportion in the size of the source. Use position: absolute in paragraph and position: relative in img holder. As I have not found a suitable place to store the site online, upei mega in the mega so that they can help me better, if they can.

link

    
asked by anonymous 10.03.2015 / 08:00

3 answers

1

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

With Fundation you can define how each content will be displayed for screen resolution type very easily.

If you prefer to do everything at hand, I recommend using Chrome Developer Tools (Key F12 windows in Chrome) and use the Mobile features it offers to set your breakpoints and create your responsive CSS.

Good luck in the project:)

    
11.03.2015 / 14:25
1

In fact, the paragraph holds 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 this paragraph, it will solve your problem and the paragraph will never go out of the image.

You must have separated the text of the image by looking for the effect of the hover that 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 another, such as: 

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

Source: link

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

    
10.04.2015 / 16:08
0

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

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

For testing I suggest the resolution testing options that browsers themselves have. In firefox: Options > developer > Adaptive design mode.

The way I use is to prepare the site for smaller resolutions, so for larger ones the bootstrap will adapt correctly. I hope I have helped.

    
11.03.2015 / 14:20
How to change a domain store? Search a site [closed]