images and links don`t stay inside frame

Question

Latrell_vie 9 Light Poster

8 Years Ago

I developed a website which i was okay with. Recently I updated it with some pictures and links which has broken its responsivness. On bigger screen it looks fine but on smallers the pictures and links dont shrink along. Help !!!!!

<!DOCTYPE html> <html> <head> <title>Portfolio</title> <!--#include file="partialHeadContent.html" --> </head> <body> <!--#include file="topnavibarEn.html" --> <div class="maincontentSubpages"> <h1 style="text-align:center;margin-bottom:7%;color:gold;">Portfolio</h1> <div style="background:#CECEF6;border: thick solid black;border-radius: 25px;font-size: 150%;margin-left:5%;margin-right:5%;padding:4%;"> <p class="portfoliotext1"> <a href='http://globaltxxx.com'>www.globalxxx.com</a><br></p> <img class="portf_images" src="images/Screenshot50.png" alt="images"><img class="portf_images" src="images/Screenshot51.png" alt="images"><img class="portf_images" src="images/Screenshot55.png" alt="images"><img class="portf_images" src="images/Screenshot56.png" alt="images"> <p class="portfoliotext2"> This website has been designed for a Taxicompany with around 300 employers. It has an imagesslide, background music, login function, phone and messaging function and a search box for the staff.  </p><br> <p class="portfoliotext1"> <a class="link_not_active" href='http://globalxxxx.com'>www.pizza___.com</a><br></p> <img class="portf_images" src="images/Screenshotpz1.png" alt="images"><img class="portf_images" src="images/Screenshotpz2.png" alt="images"><img class="portf_images" src="images/Screenshotpz3.png" alt="images"><img class="portf_images" src="images/Screenshotpz4.png" alt="images"> <p class="portfoliotext2"> This is a website for a pizzeria. Amongst it notables it has a menu with on scroll function and a pizza man widget.We will update you on its internetdomain.
    <p style="text-align:center;font-size:120%;font-style:italics;margin-top:1%;">competent - fast - economical </p> </div> <p style="text-align:center;font-size:120%;font-style:italics;margin-top:1%;">competent - fast - economical </p> </div> <div class="footer"> <div class="checkoutsection"> Check out partnersites:</div> <div style="clear: both"></div> <div class="footerlinkscontainer"> <div id="updateDiv"><script type="text/javascript" src="footerContentEn.js"> </script></div> <div class="copyrightImpressumSection">  © Techxxx.com   | All rights reserved | Vienna Tel: 0660 xxxx </div> </div> </div> <script>
function bigImg(x) {
    x.style.height = "40px";
    x.style.width = "40px";
    mousePointer(this);
}
function mousePointer(x){
    this.style.cursor="pointer"; 
}

function normalImg(x) {
    x.style.height = "20px";
    x.style.width = "20px";
}
function goToGB(){
     location.href = 'portfolioEn.html';
}
function goToAUT(){
     location.href = 'Portfolio.html';
}
</script> </body> </html>

html-css image

4 Contributors
4 Replies
277 Views
11 Hours Discussion Span
Latest Post 8 Years Ago Latest Post by drjohn

hericles 289 Master Poster

8 Years Ago

You haven't included the CSS style rules for the classes used or any media queries that you are set up. Without those we're flying blind.
You do have media queries right?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Latrell_vie 9 Light Poster · Answer 1 · 2016-02-15T00:24:00+00:00

the css is :

html,body{min-height:120%;width:100%;margin:0;background-image:url(pic9890.jpg);background-size:120%;background-attachment:fixed;}
/*------top section-------*/
.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:17px;
        background:#333;
        padding: 2% 2%;
        color:gold;
        margin-right:10px;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:gold;color:#333;}
#flags{position:absolute;top:1%;right:3%;cursor: pointer;}
/*------maincontent section-------*/        
.maincontentHome{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background:white;
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.maincontentSubpages{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background-image: url(glossywhite4.jpg);
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.workersdiv{background:#CECEF6;border: thick solid black;border-radius: 25px;font-size: 150%;margin-left:5%;margin-right:5%;margin-bottom:2%;padding:4%;}
#Banner{position:relative;top:1em;display: block;margin-left: auto;margin-right: auto;}
.clearer{clear: both;}

.maincontentpic{position:relative;top:2em;height:50em;background-image:url(CompHandWeb1.gif);background-size:100%;padding-bottom: 20%;
                background-repeat: no-repeat;}

#picUeuWorker1{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(sam2.JPG); background-size: cover;}
#picUeuWorker2{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(ario2.jpg); background-size: cover;}

.portf_images{height:14em;width:16em; margin: 1em 0.5em }
/*------footer section-------*/
.footer{position:relative;height:18%;margin-left:10%;margin-right:10%;margin-bottom:1%;background-color:black;color:grey;opacity:1;border:thick solid silver;
        border-bottom-left-radius:25px;border-bottom-right-radius:25px;}
.checkoutsection{font-size:110%;float:left;border:1px;background:orange;padding:1.5%;}
.footerlinkscontainer{text-align:center;margin:0% 0%;padding:0% 0%;font-size:200%;}
.footer  a{line-height:150%;margin:2% 1%;padding:0% 0%;}
.footer a:visited{color:blue;}
.footer a:hover{color:purple;}
#updateDiv{text-align:center;color:blue;line-height:150%;margin:2% 0% 0% 0%;padding:0% 0%;}
.copyrightImpressumSection{position:relative;font-size:60%;text-align:center;margin-bottom:1%;}
#hitCounter{position:absolute;bottom:0.1%;right:3%;font-size: 20%}

@media screen and (max-width: 767px) {
   .topnavibar{height:160px;}
   #flags{position:absolute;top:-10%;left:1%;margin-bottom:3px;} 
   .menubar1{display:flex;flex-direction:column;position:absolute;top:10%;width:93%;}
    .menubar1 > a {box-sizing:border-box;display:block;font-family:arial,helvetica,sans-serif;
        padding:0; margin:0;
        aling-self:stretch;
        margin-bottom:1px;
        font-size:17px;}

    #Banner{position:absolute;top:2em;width: 100%;display: block;margin-left: auto;margin-right: auto;}
    }
    .maincontentpic{position:relative;top:2em;height:30em;background-image:url(CompHandWeb1.gif);
     background-size:100%;background-repeat: no-repeat;}
    .copyrightImpressumSection{position:relative;width:100%;font-size:60%;text-align:center;margin-bottom:1%;}
    #hitCounter{position:static;height:20%;bottom:8%;right:3%;font-size: 20%;}
@media screen and (max-width: 768px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:5px;}
    }
@media screen and (max-width: 980px) {
    .menubar1 > a {
        font-size:7px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    }
@media screen and (max-width: 1300px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:10px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    } 
@media screen and (min-width: 1500px) {
    .maincontentpic{padding-bottom:35%;}
    }    
/*------portfolio section-------*/
.portfoliotext1{text-align:center;}

.portfoliotext2{background-color:white;padding:1em 1em;border-radius: 25px;}
.link_not_active {
   pointer-events: none;
   cursor: default;
}

Raul Perez 12 Light Poster · Answer 2 · 2016-02-15T06:45:21+00:00

I would like to help you out with this. First, the best way to face this kind of issue is in the website.
You should use a framework like bootstrap that will help you avoid to reinvent the wheel and keep the coding at the minimum.

drjohn 56 Posting Pro in Training · Answer 3 · 2016-02-15T11:21:23+00:00

It would be a lot easier if you gave a link to the page(s) where it goes wrong. Then we can see it in action, or not of course, without copying and pasting code and images to our own version of your page...