I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.
But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.
Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.
Thanks & Regards,
Mrudul
I'm going to take a wild guess and say you're using bootstrap to make things responsive.
If thats the case, you can simple add a class to images to make them scale correctly..
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
You can copy and paste this in your editor to test it.
This way, if the screen gets smaller, so will your image.
EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
</div>
</div>
</div>
Related
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us ยป</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
Is it possible to create a page in bootstrap with slider on only left half of the page and some text on right half of the page?
Will the website/page still be responsive?
If there is any such theme already, please suggest. (WordPress or bootstrap responsive)
That is not a problem at all. I suggest you take a look at the bootstrap documentation, specifically at the Grid section. It describes how to build the sites grid, which (by itself) will be responsive. If the column content behaves nicely when the viewport size changes, depends on the content you put in there.
For the slider, take a look at slick slider which is responsive.
Here is a quick bootstrap grid example for 2 columns next to each other that should give you an idea of how to do this:
<div class="container">
<div class="row">
<div class="col-md-6">
Left Column
</div>
<div class="col-md-6">
Right Column
</div>
</div>
</div>
I have an issue with website on mobile devices view...
To be much worse, on every mobile device, site is displaying exactly as in desktop view (this is the part which i need ),but problem is i can't debbug and find css error. The problem is white space on right side of website, and its visible in slider part-slider is not full screen width, as whole website too.
you can see white vertical space in screnshots here screenshots
Website is Site link, and here are screenshots of my problem
here is your problem
<header id="header-v5" class="header clearfix" style="width:100px">
<div class="wrapper header-v5-wrapper clearfix">
<div class="sixteen spans">
<div class="logo" i="">
<div class="slogan">
</div>
</div>
the header part is not responsive, for example the class="sixteen spans" has a width:960px while being previewed as a 320x480
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.