How to make a graphic image responsive in css -


i having difficulty getting graphic behave in responsive design.

the graphic in question main image below menu bar @ http://bit.ly/1wapylp

html

there no width attribute on graphic.

<div class="gc-responsive-div"> <img class="aligncenter size-full wp-image-28 gc-responsive-img" src="/wp-content/uploads/sites/8/2014/12/g_home.png" alt="gotham communications buttons graphic" /> </div>

css (added last settings in cascade)

i trying force image max-width of 100%:

div.gc-responsive-div, img.gc-responsive-img {   max-width: 100% !important; }

my expectation

i want main image adjust viewport's size shrinking in responsive fashion width-wise & height-wise versus remaining @ graphic's natural height , width overflowing outside viewpoint. when view home page in large screen monitor, main graphic (natural width=663px , natural height=616px) appears designed. yet when @ home page on iphone main graphic appears in original natural width , height right of screen , 80% of graphic shows off screen , can't seen.

to me, responsive means graphic shrinks consume viewpoint , have aspect ratio adjust viewport.

i can't work. doing wrong here?

screen shots

large screen monitor (looks designed)

enter image description here

mobile device (graphic not resize)

enter image description here

thanks.

the html/css code seems fine. there fixed width set on one/more of container elements, find , add/change max-width too, or adjust in media queries if necessary.

also make sure have <meta name="viewport" content="width=device-width,initial-scale=1"> or similar responsive meta tags set.


Comments

Post a Comment

Popular posts from this blog

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more

javascript - Restarting Supervisor and effect on FlaskSocketIO -

in index.html (html/javascript) have: $(document).ready(function(){ namespace = '/test'; var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); socket.on('connect', function() { socket.emit('join', {room: 'venue_1'}); }); socket.on('my response', function(msg) { $('#log').append('<br>received #' + ': ' + msg.data); }); }); on server have: @socketio.on('connect', namespace='/test') def test_connect(): if session.get('venue_id'): emit('my response', {'data': 'connected'}) session.pop('venue_id', none) else: request.namespace.disconnect() @socketio.on('join', namespace='/test') def join(message): join_room(message['room']) room = message[...
Read more

php - Mongodb connectivity error -

<?php /** * connects mongodb server. * stops code execution on`enter code here` connection error. * * not need use file, place globally assign mongodb instance $db. * * define constants in config or here */ define('mdb_username', 'root'); define('mdb_password', 'asd'); define('mdb_host', 'localhost:80'); define('mdb_name', 'abc'); if (!class_exists('mongo')) { die("mongo class not existing. did install php mongodb extension?"); } try { $conn = new mongoclient("mongodb://".mdb_username.":".mdb_password."@".mdb_host."/".mdb_name); $conn->authenticate('root','gynadfehurbo'); $db = $conn->selectdb(mdb_name); } catch (mongoconnectionexception $e) { die($e->getmessage()); // in production might want turn off. } mongodb connectivity problem. while trying connect mongodb php got authentication problem .....
Read more