1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why isn't my full image appearing?

Discussion in 'HTML & Website Design' started by Soupi, Sep 18, 2018.

  1. #1
    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
    SEMrush
     
    Soupi, Sep 18, 2018 IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,580
    Likes Received:
    1,041
    Best Answers:
    19
    Trophy Points:
    400
    #2
    The images are too wide to show them side by side in their real size. You will have to make them responsive first.

    What you need to do is add width="100%" to both of the image links:

    <img src="images/suhayb.jpeg" width="100%" alt="Iram Family">

    <img src="images/iram.jpeg" width="100%" alt="Iram Family">

    The images will become responsive. Then increase .cols to a desired width where the image are not looking too small. As an example, change

    .cols {
    width: 471px;
    }

    to

    .cols {
    width: 550px;
    }
     
    qwikad.com, Sep 18, 2018 IP
  3. Soupi

    Soupi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thank you, I have made the changes but where would I put the center code so the both containers can be centered. please see site again.
     
    Soupi, Sep 19, 2018 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,580
    Likes Received:
    1,041
    Best Answers:
    19
    Trophy Points:
    400
    #4
    Try this. Change this:

    .cols {
    width: 800px;
    }

    to

    .cols {
    width: 800px;
    display: block;
    margin: 0 auto 0 auto;
    }

    Then remove float: left from:

    .col1, .col2, .col3, .cols {
    float: left;
    }
     
    qwikad.com, Sep 19, 2018 IP
  5. Soupi

    Soupi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thank you so much this worked.
     
    Soupi, Sep 20, 2018 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,580
    Likes Received:
    1,041
    Best Answers:
    19
    Trophy Points:
    400
    #6
    By the way, set pad_left1 and pad_left2 to 0:

    Change:

    .pad_left1 {
    padding-left: 6px;
    }

    to:

    .pad_left1 {
    padding-left: 0;
    }

    =============

    .pad_left2 {
    padding-left: 18px;
    }

    to:

    .pad_left2 {
    padding-left: 0;
    }

    That way your containers will be perfectly centered.
     
    qwikad.com, Sep 20, 2018 IP