CODEWITHSUNDEEP
javascripthtmlcss
m.hussain
m.hussain

Reputation: 23

How to increase the width of my twitter feed

I am trying to increase the width of the twitter feed displayed on my webpage, I added a Div id to it and tried increasing its size in css however it stops getting bigger after a certain point, Also I want to add images in my portfolio section which includes 3 random pictures of like computers which get bigger and change size when you hover over them in css, how do I do this? Also I can't figure out how to change the color of the background of the webpage, everything I have tried doesn't work. Thanks.

I have provided the HTML, CSS and JS code for my code below. 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Muhammed's Webpage</title>

    <style>
        #body {
            margin: auto;
            max-width: 85%;
            font-family: 'Exo 2', Times, serif;
            color: black;
            padding-top: 50px;
        }

        .mainlogo {
            font-size: 18px;
            font-weight: 900;
            font-family: 'Montserrat', Times, serif;
            text-decoration: underline;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            margin-left: 4%;
            opacity: 0.8;
            max-width: 85%;

        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: white;
            position: fixed;
            font-size: 20px;
        }

        li {
            float: left;
            border-right: 2px solid black;
        }

        li:first-child {
            border-left: 2px solid black;
        }

        li a {
            display: inline-block;
            color: black;
            text-align: justify;
            padding: 36px 40px;
            text-decoration: underline;
            font-family: 'Montserrat', Times, serif;
            text-shadow: 4px 4px 4px #aaa;
        }

        li a:hover {
            background-color: #C2E5E5;
            color: black;
        }

        .yt {
            margin-left: 53px;
            margin-top: 30px;
            display: inline-block;
            height: 500px;
            width: 650px;
        }

        #twitter {
            display: inline-block;
            height: 300px;
            width: 300px;
        }

        .contentbox {
            font-family: 'Exo 2', sans-serif;
            font-weight: 700;
            font-size: 2em;
            padding-left: 10px;
            padding-bottom: 0;
            margin-bottom: 0;
            background-color: #C2E5E5;
        }

        .content {
            background-color: #C2E5E5;
        }

        p {
            text-indent: 3%;
            margin: auto;
            max-width: 95%;
        }

        .contentbox {
            font-family: 'Montserrat', Times, serif;
            font-size: 28px;
        }
    </style>
    <script>
        !function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>
</head>
<body>
<div class="mainlogo">

    <div>Muhammed's
        <br>Webpage
    </div>

</div>

<div id="body">

    <nav>
        <ul>

            <li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
            <li><a href="#CurriculumVitae"> CURRICULUM VITAE </a></li>
            <li><a href="#Portfolio"> PORTFOLIO </a></li>
            <li><a href="#Report"> REPORT </a></li>
        </ul>
    </nav>

    <div class="yt">
        <iframe src="http://www.youtube.com/embed/nKIu9yen5nc">
        </iframe>
    </div>

    <div id="twitter">
        <a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by
            @applenws</a>
    </div>

    <div class="content" id="Basic Information">
        <h3 class="contentbox"><u>Basic Information</u></h3>
        <p>
            <br>Name: Muhammed Hussain
            <br>Age: 18
            <br>Contact Number: 07711909673
            <br>E-mail: [email protected]
            <br>Occupation: Student of Goldsmiths, University of London
            <br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
            <br>
            <br>
        </p>
    </div>

    <div class="content" id="Curriculum Vitae">
        <h3 class="contentbox"><u>Curriculum Vitae</u></h3>
        <p>
            <br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b>
            <br>Responsible for ensuring all daily administrative tasks are met within time schedule
            <br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent
            service while working in a team environment and focusing on customer service
            <br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
            <br>
            <br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
            <br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
            <br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon
            receiving the order.
            <br>
            <br>
            <u>Skills Gained:</u>
            <br>Communication - Established rapport and resolved queries within pressurised customer service
            environments
            <br>Teamwork - Motivated and developed colleagues to work effectively
            <br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form
            <br>
            <br>
        <p>
    </div>

    <div class="content" id="Portfolio">
        <h3 class="contentbox"><u>Portfolio</u></h3>
        <p>
            <br>Here im going to include some images and use css to make them interactive and exciting
            <br>
            <br>
        </p>
    </div>


    <div class="content" id="Report">
        <h3 class="contentbox"><u>Report</u></h3>
        <p>
            <br>Here im going to state why i did what i did in detail
        <p>
            <br>
    </div>

    <br>
    <br>
</div>

</body>
</html>

Upvotes: 0

Views: 855

Answers (2)

Zeke
Zeke

Reputation: 1291

  1. Your Twitter feed has a width set in HTML property. Erase the property and move it to CSS. That should fix the Twitter thing. Edit: Remember that the height is set on Twitter > Settings > Widget > Height.

- EDIT 1 -

Now that I know your Twitter feed can't be controlled by you, you have to control the result of your Twitter script which will normally be 600px of height by default. No matter what this is, you know it will end up styling an iframe with the twitter-timeline CSS class, so you only need to overwrite the value like this:

.twitter-timeline {
    height: 503px; // 503 because for some reason it needs 3 more pixels to catch up with your video, as I could see.
}

- END EDIT 1 -

  1. You just gave away all of your personal information to strangers around the web. You'll probably be spammed in a few seconds if they are true. I suggest you ONLY provide necessary code. There is a lot of CSS and HTML not related to the question, you can simply ask them in another question or explain them apart of each other.

  2. To place pictures you can do many things, being them random means either JavaScript or preloaded with PHP. I imagine you would be loading them from your site, let's say /images/computers/ and give them a class, for instance photo. Then on CSS, you can do the following:

    .photo {
    height:200px;
}
.photo:hover {
    height:400px;
}

That will make it bigger on hover using CSS. If you like to animate it, you might want to use other CSS properties. Search on the web, you'll find them.

- EDIT 2 -

So, looking at your pictures with the class photo, I see that you were not adding the % values correctly. You need to find a balanced value for each one of your images. In your case, we are playing with image padding, margin and width basically. So there are 3 images and you know that the percentage must reach something around 100%:

.photo {
    background-color: white;
    padding: 1%;
    margin-left: 5%;
    margin-bottom: 2%;
    -webkit-box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
    box-shadow: 0 0 0.2em 0.15em rgba(00, 00, 00, 0.35);
    float: left;
    width: 25%;
    transition: all 0.25s ease-out;
}

According to this code I wrote for you, now the formula is:

(3 * 25%) + (6 * 1%) + (3 * 5%) = 75% + 6% + 15% = 96%

6 times 1% because the padding will be added to both left and right of the picture.

- END EDIT 2 -

  1. The background color of the website? That is just too basic. It depends on your needs, you can set your background color to the <html> or <body>. I'll use HTML:

     html {
     background-color:red;
 }

With that, your website will have a red background. Of course you can use HEX, or rgb() or rgba() or color names, whatever you want.

Upvotes: 1

iyyappan
iyyappan

Reputation: 777

Try this codes.

twitter frame having max-width="520" that is a boundary.portfolia images supported responsive also.

MAKE IT COOL,WE LOVE OUR CODING.

<!DOCTYPE html>
<html lang="en">

 <head>
  <title>Muhammed's Webpage</title>

  <link rel="stylesheet" type="text/css" href="homepage.css">
  <script src="homepage.js"></script>

  <link href='https://fonts.googleapis.com/css?family=Exo+2:500,700,800italic,600|Montserrat' rel='stylesheet' type='text/css'>

 </head>

 <div class="mainlogo">

  <body>Muhammed's 
   <br>Webpage</body>

  </div>

   <div id="body">

    <nav>
      <ul>

        <li><a href="#BasicInfo"> BASIC INFORMATION </a></li>
        <li><a href="#CurriculumVitae"> CURRICULUM VITAE </a></li>
        <li><a href="#Portfolio"> PORTFOLIO </a></li>
        <li><a href="#Report"> REPORT </a></li>
      </ul>
    </nav>

    <div class="yt">
      <iframe  src="http://www.youtube.com/embed/nKIu9yen5nc">
      </iframe>
    </div>

   <div id = "twitter">
    <a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560">Tweets by @applenws</a>
   </div>

    <div class="content" id="Basic Information">
      <h3 class="contentbox"> <u>Basic Information</u> </h3>
      <p>
        <br>Name: Muhammed Hussain 
        <br>Age: 18 
        <br>Contact Number: 07711909673
        <br>E-mail: [email protected]
        <br>Occupation: Student of Goldsmiths, University of London
        <br>Hobbies & Interests: Playing on my ps4 and outdoor tennis
        <br>
        <br>  
      </p>
    </div>

    <div class="content" id="Curriculum Vitae">
      <h3 class="contentbox"> <u>Curriculum Vitae</u> </h3>
      <p>
        <br><u>Jun 2015 - Currently Employed</u> : <b>Harrods - Operations Assistant</b> 
        <br>Responsible for ensuring all daily administrative tasks are met within time schedule
        <br>Worked with colleagues to sustain a world class service of luxury goods, through providing an excellent service while working in a team environment and focusing on customer service
        <br>Proactive use of CCA and SAP software on a regular basis, in order to deal with online orders.
        <br>
        <br><u>Jun 2014 - Sep 2014</u> : <b>Direct Accountancy - Accounts Assistant</b>
        <br>Assisted Account Manager through creating invoices and sending to customers using SAGE software
        <br>Made and arranged invoices occasionally for customers, and ensured these were sent out promptly upon receiving the order.
        <br>
        <br>
        <u>Skills Gained:</u>
        <br>Communication - Established rapport and resolved queries within pressurised customer service environments
        <br>Teamwork - Motivated and developed colleagues to work effectively
        <br>Leadership - Showed leadership qualities when delivering end of unit presentations at Sixth form 
        <br>
        <br> 
      <p>
    </div>

    <div class="content" id="Portfolio" style="height:250px">
      <h3 class="contentbox"> <u>Portfolio</u> </h3>
      <p>
        <br>Here im going to include some images and use css to make them interactive and exciting
        <br>
        <br>
      </p>

      <ul class="portfolioimg" style="">
         <li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
         <li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>
         <li><img src="https://getbootstrap.com/assets/img/devices.png" alt="Responsive across devices" class="img-responsive"></li>

      </ul>

    </div>


    <div class="content" id="Report">
      <h3 class="contentbox"> <u>Report</u> </h3>
      <p>
        <br>Here im going to state why i did what i did in detail
      <p>
        <br>
    </div>

        <br>
        <br>

  </body>

</html>


<style>
body{
  background-color:gray;
}


.portfolioimg {
    clear: both;
    display: block;
     margin: 30px auto 0;
    padding: 0;
    position: static !important;
    text-align: center;
    width: 1000px;
    background-color:transparent;
}
.portfolioimg > li {
    background-color: transparent !important;
    border: medium none !important;
    display: inline-block;
    float: none;
    list-style-type: none;
    margin-right: 40px;
    text-align: center;
}
.portfolioimg > li img{
  width:200px;
  }

#body {


    margin: auto;
    max-width: 85%; 
    font-family: 'Exo 2', Times, serif;
    color: black;
    padding-top: 50px;
}

.mainlogo {
    font-size: 18px;
    font-weight: 900;
    font-family: 'Montserrat' , Times, serif;
    text-decoration: underline;
}
nav {
    position: fixed; 
    top: 0;  
    width: 100%;
    margin-left: 4%;
    opacity: 0.8;
    max-width: 85%;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    position: fixed;
    font-size: 20px;
}
li {
    float: left;
    border-right: 2px solid black;
}

li:first-child {
    border-left: 2px solid black;
}
li a {
    display: inline-block;
    color: black;
    text-align: justify;
    padding: 36px 40px; 
    text-decoration: underline; 
    font-family: 'Montserrat', Times, serif;
    text-shadow: 4px 4px 4px #aaa ;
}
li a:hover {
    background-color: #C2E5E5;
    color: black; 
}

.yt {
  margin-left: 53px;
  margin-top: 30px;
  display:inline-block;
  height: 500px;
  width: 650px;
} 

#twitter {
  display:inline-block;
  height: 300px;
  width: 520px;
}

.contentbox {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding-left: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color:  #C2E5E5;
}
.content {
    background-color: #C2E5E5;
}
p {
    text-indent: 3%; 
    margin: auto;
    max-width: 95%;
}

.contentbox {
    font-family: 'Montserrat', Times, serif;
    font-size: 28px;
}
</style>

<script>
!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+"://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");
</script>

Upvotes: 0

Related Questions