How to keep icon aligned left when resizing page?

Asked

Viewed 96 times

1

I have a page that when resized the facebook image is broken and I am not able to leave it aligned to the left next to the field of the newsletter, I tried to decrease the size of the input and was not cool, I did this:

#newsletter-form input#newsletter {
   float: left;
   width: 300px; /* ALTEREI DE 360 PARA 300 */
   margin-right: 10px;
   display: inline;
}

In addition the input gets smaller when resizing the still broken image. The page can be viewed here, without the change: Website under development

css

  • I noticed on your page a css linked to the image #newsletter-wrap img, float: right; in case it’s your facebook image (icon), I changed it to left, and got better but I don’t know if it’s the result you need.... Or you can also take the float; Decrease from 300px to 280px the input that already looks better too; See if it’s the result you want...

  • Hello @Rafaelwithoeft, thanks for the tip, the image has now stuck to the input and is still broken.

  • Broken in what sense? What result do you expect from the page when resizing? So maybe it would be easier to help;

  • I mean, you threw the image at the bottom line, how can I give a space between the button and the image?

  • You can use a 15px padding-left to let it go a little further, in case it breaks... if you’re not using bootstrap, I think you’d have to use css medias queries: http://tableless.com.br/introducao-sobre-media-queries/ and so adapt your input to "measurements"

  • You can take the float and the display of the #newsletter-wrap img that the effect will continue the same, just leave the padding-left; and see about medias queries to adapt your input to different resolutions; ouu... you can use width: 70%, for example; Take a test and see what suits you best;

Show 1 more comment

1 answer

1


First remove the display: inline since you are wearing float: left. Then remove width e height img and put in css to get better.

Code

#newsletter-form input#newsletter {
    float: left;
    margin-bottom: 0;
    margin-right: 10px;
    width: 360px;
}
#newsletter-form input.button {
    float: left;
    margin-bottom: 0;
    margin-right: 3px;
}
#newsletter-wrap img {
    height: 29px;
    margin: 0;
    width: 29px;
}

Browser other questions tagged css

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