html - I thought using a percentage in margin would be responsive -


so @ moment, i'm trying center 3 social media icons in footer of website nicely.

so instead of using margin , pixels, not responsive when viewed on smaller screens ofcourse, tried using percentages, thought made responsive. thought percentage of screen calculated, resulting in same percentage distance on different screens different widths..

as can see on website (http://riksblog.com/marnik/index.html) not case when resizing..

can please clear out how make responsive , why combination of percentages , margin isn't correctly working when resizing?

how can make sure 3 logo's centered on every device?

solution center multiple images in footer , margin between them:

.footer {    width: 100%;  }    .logo-container {    margin: auto;    width: 320px;    text-align: center;   /* can set lowest bound,     * or can change based on breakpoint    */  }    .logo {    margin: 0 10px; /*or whatever spacing need*/  }
<div class="footer">     <div class="logo-container">       <img src="logo/path" class="logo">       <img src="logo/path" class="logo">       <img src="logo/path" class="logo">     </div>  </div>

the percentage based of parent container width.

here, if want them centered put them parent container , give width, have set margin auto center it.

so should work

html

<div class="footer">    <div class="logo-container">      <img src="logo/path" class="logo">      <img src="logo/path" class="logo">      <img src="logo/path" class="logo">    </div> </div>

css

.footer {   width: 100%; }  .logo-container {   margin: auto;   width: 320px;   text-align: center;  /* can set lowest bound,    * or can change based on breakpoint   */ }  .logo {   margin: 0 10px; /*or whatever spacing need*/ }

as stated in comments either set width minimum width (assuming fits smallest screen size/etc). above we're doing 2 things. 1 putting images in container, , having them center w/ text-align: center. take container, , center align using margin:auto.

here's ex fiddle: http://jsfiddle.net/7med35md/


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more