Full image fails to appear

@soupiiSep 18.2018

In the index page towards the bottom I have two images in two containers. But the full image dosnt appear. How would I make the containers wider so both images appear properly.

Here is the link.
http://rahmankhaliq.com/index.html
[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-09-18/1537302470-265493-capture.png]

to post a comment

CSS HTML

13 Comments(s) _↴

@cootheadSep 18.2018 — #Hi there soupi,

try this addition to your CSS...

``<i>
 </i>.wrapper img {
 width: 100%;
 height:auto;
 }<i>
 </i>``

_coothead_

@SempervivumSep 18.2018 — #Making the images visible completely can be easily done by applying width:100% to them so that they adjust their width to the wrapping container:

[upl-image-preview url=https://www.webdeveloper.com/forum/assets/files/2018-09-18/1537310649-380523-bride-groom.png]

@soupiiauthorSep 18.2018 — #Thank you, how do i make the two containers bigger so the images become bigger as well....?

@cootheadSep 19.2018 — #Hi there soupii,

You don't needto make the containers bigger.

What you should be doing, is to concentrate your

efforts on making the page **responsive** so that it

renders properly on **all devices**. ?

_coothead_

@Yucca195Sep 19.2018 — #Do you like football? Do you like to play games? If your answer is yes, then you must try FIFA19. FIFA is a football game developed by EA, which has not yet been released, but many fans have been eager to try.

So, before this, FIFA game fans should be prepared. You can purchase [url=https://www.mmoah.com/fifa-coins]FIFA 19 Coins[/url] at MMOAH . We will advise you based on your individual requirements. We not only solve the problem during the transaction, but also deal with it after the transaction. We are waiting for your feedback.

All in all, I think the [url=https://www.mmoah.com/fifa-coins]FUT 19 Coins for sale[/url] needed to buy MMOAH is a wise choice because our products are reasonably priced and consistently satisfied customer's request.

@soupiiauthorSep 19.2018 — #how would i do that sir?

@cootheadSep 19.2018 — #@soupii#1596046

I do not know how you would do that.

In the five or six years that I've seen you around the forums,

I've not discerned any improvement in your coding skills.

HTML, itself, is fully responsive, it is **poorly applied CSS** that

actually makes it otherwise.

_coothead_

@thebronxsystemSep 19.2018 — #@coothead#1596048 waa savage lol

@soupii he just means when the viewport size is smaller the page looks decent and is still functional eg on phones doesnt have weird x-axis scroll bar.

need to use media queries resizing stuff maybe hide some images on smaller screens

@rootSep 19.2018 — #I am sure CSS will allow you to position the header with a container set to the height you want with no overflow visible and either auto size it or size it to the width of the image or some way of getting CSS to stuff this image in to something that you can control.

@SempervivumSep 20.2018 — #Hallo soupii, some addittional hints for making your layout responsive:

- Use relative measurements (%) instead of absolute ones (px) whenever possible.

- Use flex layout instead of float, it's made for making responsive layouts.

@coothead
In the five or six years that I've seen you around the forums,

I've not discerned any improvement in your coding skills.[/quote]That's no wonder: Posting complete solutions, ready for copy&paste, without an explanation, as you do commonly, will solve the TO's current problem but is not suitable for improving his coding skills. Instead one should promote his own initiative.

@cootheadSep 20.2018 — #@Sempervivum#1596063

I would humbly suggest that the real cause of the poor coding

skills that one may witness on a daily basis, is not down to my

obscure little postings in almost dead coding forums like this

one, but is actually due to the prevalent use of the abominations

that are **"Wordpress", "Bootstrap", "jQuery"** and their ilk.

_coothead_

@rootSep 21.2018 — #@coothead#1596068

Yes, I do agree, the claim to speed up workflow and development of website has been floated before in many other forms but is ultimately a tool of control.

These so called development tools limit your range of abilities where as free form coding leaves you to your imagination.

Last night I learned as my son was doing his homework what a Melancoil was, and just for jollies, I wrote a Melancoil generator that takes any number you put in to it, generates the sequence, ends when the repeat is found, indicates that and also gives a measurement of the lengths of the sequences, which is interesting.

I'd like to see that done in JQuery in under 10 minutes.

As for examples, thats all they are, examples and examples are there to teach and in this case, why should something that is an example be seen as giving the answer on a plate? Not really, not if the way the code is written is nothing like that of the author, uses different name conventions and so on.

In simplest of terms, if someone does decide to show a full working example, that is their choice BUT what I do say is that if the thread is a "Homework Question" then nothing in the way of examples should be given as these cheap skates are tryint to get others to do their homework for them, why help someone in to a better qualifaction than they should get through hard work?

Its been shown to be a problem with very poorly educated professionals who are not fully qualified and they got there off the backs of others work and likely cheated their way through education in a similar fashion.

So examples are good if they teach but not good if they are for answering homework questions (which are obvious by any measure)

Anyway, the issue here is that the problem has been solded and now this thread is locked to prevent it being hijacked any further

?

@rootSep 21.2018 — #{"locked":true}

Also in #HTML _↴

Time to update Animated GIFs load with firefox but not ie onclick with underline...... Problem!

Success!

Help @soupii spread the word by sharing this article on Twitter...

Tweet This

Full image fails to appear

13 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Full image fails to appear

13 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #HTML _↴