Member Avatar for Latrell_vie

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=''>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>
  • 4 Contributors
  • 4 Replies
  • 295 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

Quick diagnosis: two things are causing the overflow on small screens — broken HTML (malformed anchor hrefs) and fixed image sizing in the stylesheet. , your HTML contains anchors that look like they have an <a> tag inside the href attribute; that produces invalid DOM and unpredictable layout. is right to ask about media queries, and is right that a live URL helps. ’s Bootstrap suggestion will work, but these problems are simple to fix without a framework.

Fixes you can apply immediately:

  • Correct the anchor markup (remove nested tags inside the href). Example:

    <a href="http://example.com" rel="nofollow">www.example.com</a>

  • Make the gallery a responsive row and let images scale with their container. Wrap the images and use flex-wrap plus percentage widths and auto height:

    <div class="portfolio-row">
  <img src="images/Screenshot50.png" alt="">
  <img src="images/Screenshot51.png" alt="">
  ...
</div>
    .portfolio-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.portfolio-row img { width: calc(50% - 0.5rem); max-width: 420px; height: auto; display: block; box-sizing: border-box; }
@media (max-width: 480px) { .portfolio-row img { width: 100%; } }

  • Prevent long URL text from overflowing by allowing breaks:

    .portfoliotext1 a, .portfoliotext2 a { word-wrap: break-word; overflow-wrap: break-word; }

Quick checklist while debugging: add the meta viewport tag in <head>, validate HTML (fix malformed anchors), look for inline width/height or scripts that override CSS, test in browser devtools mobile emulation, and remove or change background-attachment: fixed for mobile. These steps should restore proper responsiveness without a full framework.

Recommended Answers

All 4 Replies

Member Avatar for hericles

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?

Member Avatar for Latrell_vie

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;
}
Member Avatar for Raul Perez

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.

Member Avatar for drjohn

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...

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.