Skip to content
Fix Code Error

Adobe XD to responsive html

July 3, 2021 by Code Error
Posted By: Anonymous

I am working on a project where I had received all the designs in Adobe Xd format. I usually work on the backend part and database and server deployment. But here I need to work on the design part too.

I used adobe Xd webexport plugin and converted the design into html format. But real problems arise on the responsive part for mobile and tablet.

What is the quick solution for me to responsive those html pages?

here is the code of the sample html that I received after converting using webexport in adobe Xd.
Really appreciate some thoughts on this matter.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1 Landing Page</title>
<style id="applicationStylesheet" type="text/css">
    .mediaViewInfo {
        --web-view-name: 1 Landing Page;
        --web-view-id: ID1_Landing_Page;
        --web-scale-to-fit: true;
        --web-scale-to-fit-type: fit;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
    }
    :root {
        --web-view-ids: ID1_Landing_Page;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: none;
    }
    #ID1_Landing_Page {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgba(252,248,238,1);
        overflow: hidden;
        --web-view-name: 1 Landing Page;
        --web-view-id: ID1_Landing_Page;
        --web-scale-to-fit: true;
        --web-scale-to-fit-type: fit;
        --web-scale-on-resize: true;
        --web-enable-deep-linking: true;
    }
    @keyframes fadein {

        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }

    }
    #Screen_Shot_2020-10-26_at_3244 {
        position: absolute;
        width: 399px;
        height: 155px;
        left: 33px;
        top: 37px;
        overflow: visible;
    }
    #Home {
        left: 620px;
        top: 86px;
        position: absolute;
        overflow: visible;
        width: 65px;
        white-space: nowrap;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(115,147,97,1);
    }
    #Products {
        left: 768px;
        top: 86px;
        position: absolute;
        overflow: visible;
        width: 94px;
        white-space: nowrap;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 16_Products_Drop_Down.html;
        cursor: pointer;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(112,112,112,1);
    }
    #Companies {
        left: 947px;
        top: 86px;
        position: absolute;
        overflow: visible;
        width: 118px;
        white-space: nowrap;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 19_Companies_Drop_Down.html;
        cursor: pointer;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(112,112,112,1);
    }
    #LoginSignup {
        left: 1457px;
        top: 88px;
        position: absolute;
        overflow: visible;
        width: 140px;
        white-space: nowrap;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 3_User_Log_In.html;
        cursor: pointer;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(112,112,112,1);
    }
    #About_us {
        left: 1148px;
        top: 88px;
        position: absolute;
        overflow: visible;
        width: 96px;
        white-space: nowrap;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 32_About_Us.html;
        cursor: pointer;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(112,112,112,1);
    }
    #Blog {
        left: 1326px;
        top: 88px;
        position: absolute;
        overflow: visible;
        width: 48px;
        white-space: nowrap;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 29_Blog.html;
        cursor: pointer;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(112,112,112,1);
    }
    #Ellipse_62 {
        fill: rgba(115,147,97,1);
    }
    .Ellipse_62 {
        position: absolute;
        overflow: visible;
        width: 13px;
        height: 13px;
        left: 646px;
        top: 124px;
    }
    #Component_10__1 {
        position: absolute;
        width: 222px;
        height: 33px;
        left: 1664px;
        top: 86px;
        overflow: visible;
        --web-animation: fadein 0.3s ease-out;
        --web-action-type: page;
        --web-action-target: 31_Search_Page.html;
        cursor: pointer;
    }
    #Rectangle_1 {
        fill: rgba(255,255,255,1);
        stroke: rgba(45,93,19,0.565);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Rectangle_1 {
        position: absolute;
        overflow: visible;
        width: 222px;
        height: 33px;
        left: 0px;
        top: 0px;
    }
    #loupe {
        position: absolute;
        width: 17px;
        height: 17px;
        left: 13px;
        top: 8px;
        overflow: visible;
    }
    #Group_24 {
        position: absolute;
        width: 14.973px;
        height: 14.973px;
        left: 0px;
        top: 0px;
        overflow: visible;
    }
    #Group_23 {
        position: absolute;
        width: 14.973px;
        height: 14.973px;
        left: 0px;
        top: 0px;
        overflow: visible;
    }
    #Path_87 {
        fill: rgba(45,93,19,1);
    }
    .Path_87 {
        overflow: visible;
        position: absolute;
        width: 14.973px;
        height: 14.973px;
        left: 0px;
        top: 0px;
        transform: matrix(1,0,0,1,0,0);
    }
    #Group_26 {
        position: absolute;
        width: 5.344px;
        height: 5.344px;
        left: 11.656px;
        top: 11.656px;
        overflow: visible;
    }
    #Group_25 {
        position: absolute;
        width: 5.344px;
        height: 5.344px;
        left: 0px;
        top: 0px;
        overflow: visible;
    }
    #Path_88 {
        fill: rgba(45,93,19,1);
    }
    .Path_88 {
        overflow: visible;
        position: absolute;
        width: 5.346px;
        height: 5.344px;
        left: -0.002px;
        top: 0px;
        transform: matrix(1,0,0,1,0,0);
    }
    #Search {
        left: 40px;
        top: 6px;
        position: absolute;
        overflow: visible;
        width: 53px;
        white-space: nowrap;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: lighter;
        font-size: 18px;
        color: rgba(112,112,112,1);
    }
    #Welcome__To_Captivist {
        left: 128px;
        top: 400px;
        position: absolute;
        overflow: visible;
        width: 482px;
        white-space: nowrap;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 90px;
        color: rgba(81,141,27,1);
    }
    #Were_here_to_help_you_make_mor {
        left: 128px;
        top: 625px;
        position: absolute;
        overflow: visible;
        width: 545px;
        height: 121px;
        line-height: 40px;
        margin-top: -5px;
        text-align: left;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 30px;
        color: rgba(45,93,19,1);
    }
    #E28094PngtreeE28094world20food {
        position: absolute;
        width: 957.689px;
        height: 722.28px;
        left: 863px;
        top: 202px;
        overflow: visible;
    }
    #Line_1 {
        fill: transparent;
        stroke: rgba(45,93,19,0.275);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Line_1 {
        overflow: visible;
        position: absolute;
        width: 1293px;
        height: 1px;
        left: 593.5px;
        top: 163.5px;
        transform: matrix(1,0,0,1,0,0);
    }
</style>
</head>
<body>
<div id="ID1_Landing_Page">
    <img id="Screen_Shot_2020-10-26_at_3244" src="Screen_Shot_2020-10-26_at_3244.png" srcset="Screen_Shot_2020-10-26_at_3244.png 1x, [email protected] 2x">

    <div id="Home">
        <span>Home</span>
    </div>
    <div onclick="application.goToTargetView(event)" id="Products">
        <span>Products</span>
    </div>
    <div onclick="application.goToTargetView(event)" id="Companies">
        <span>Companies</span>
    </div>
    <div onclick="application.goToTargetView(event)" id="LoginSignup">
        <span>Login/Signup</span>
    </div>
    <div onclick="application.goToTargetView(event)" id="About_us">
        <span>About us</span>
    </div>
    <div onclick="application.goToTargetView(event)" id="Blog">
        <span>Blog</span>
    </div>
    <svg class="Ellipse_62">
        <ellipse id="Ellipse_62" rx="6.5" ry="6.5" cx="6.5" cy="6.5">
        </ellipse>
    </svg>
    <div onclick="application.goToTargetView(event)" id="Component_10__1" class="Component_10___1">
        <svg class="Rectangle_1">
            <rect id="Rectangle_1" rx="16.5" ry="16.5" x="0" y="0" width="222" height="33">
            </rect>
        </svg>
        <div id="loupe">
            <div id="Group_24">
                <div id="Group_23">
                    <svg class="Path_87" viewBox="0 0 14.973 14.973">
                        <path id="Path_87" d="M 7.48643970489502 0 C 3.35852837562561 0 0 3.35852837562561 0 7.48643970489502 C 0 11.61458301544189 3.35852837562561 14.97287940979004 7.48643970489502 14.97287940979004 C 11.61458301544189 14.97287940979004 14.97287940979004 11.61458301544189 14.97287940979004 7.48643970489502 C 14.97287940979004 3.35852837562561 11.61458206176758 0 7.48643970489502 0 Z M 7.48643970489502 13.59079933166504 C 4.120539665222168 13.59079933166504 1.382112741470337 10.85237216949463 1.382112741470337 7.486472606658936 C 1.382112741470337 4.120572566986084 4.120539665222168 1.382112860679626 7.48643970489502 1.382112860679626 C 10.85233783721924 1.382112860679626 13.59076690673828 4.120539665222168 13.59076690673828 7.48643970489502 C 13.59076690673828 10.85233783721924 10.85233783721924 13.59079933166504 7.48643970489502 13.59079933166504 Z">
                        </path>
                    </svg>
                </div>
            </div>
            <div id="Group_26">
                <div id="Group_25">
                    <svg class="Path_88" viewBox="351.046 351.046 5.344 5.344">
                        <path id="Path_88" d="M 356.1875 355.2103271484375 L 352.2254333496094 351.2482604980469 C 351.9554748535156 350.9783020019531 351.5182495117188 350.9783020019531 351.2482604980469 351.2482604980469 C 350.9783020019531 351.5180053710938 350.9783020019531 351.9556884765625 351.2482604980469 352.2254333496094 L 355.2103271484375 356.1875 C 355.3453063964844 356.3224792480469 355.5220031738281 356.3899841308594 355.6989135742188 356.3899841308594 C 355.8755798339844 356.3899841308594 356.052490234375 356.3224792480469 356.1875 356.1875 C 356.4574890136719 355.9177551269531 356.4574890136719 355.4800720214844 356.1875 355.2103271484375 Z">
                        </path>
                    </svg>
                </div>
            </div>
        </div>
        <div id="Search">
            <span>Search</span>
        </div>
    </div>
    <div id="Welcome__To_Captivist">
        <span>Welcome <br/>To Captivist</span>
    </div>
    <div id="Were_here_to_help_you_make_mor">
        <span>We’re here to help you make more informed decisions about consumer decisions.</span>
    </div>
    <img id="E28094PngtreeE28094world20food" src="E28094PngtreeE28094world20food.png" srcset="E28094PngtreeE28094world20food.png 1x, [email protected] 2x">

    <svg class="Line_1" viewBox="0 0 1293 1">
        <path id="Line_1" d="M 1293 0 L 0 0">
        </path>
    </svg>
</div>
</body>
</html>

Solution

I will advice you learn some frontend technics like html, CSS and bootstrap because it will really help you.

you can work with this little work of mine and maybe later I’ll update it

_x000D_

_x000D_

<script>
let menuToggle = document.getElementById("toggle-menu");
let x = document.getElementByClassName("navbar navbar-tab");
let y = document.getElementByClassName("searchForm");

function toggleBar(){
  x.style.display = "block";
  y.style.display = "block";
}
</script>

_x000D_

<style>
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgba(252, 248, 238, 1);
  font-size: 14px;
  font-family: " Lato", sans-serif;
}

#main-header {
  width: 100%;
  height: 80px;
}
.container-fluid {
  max-width: 1300px;
  margin: auto;
  padding: 0 25px;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-top: 35px;
}

.logo {
  position: absolute;
  left: 60px;
}

.logo .navbar-brand {
  width: 150px;
  max-height: 60px;
}

.img-fluid {
  width: 100% !important;
}
.navbar .toggle-bar {
  width: 60px;
  height: 60px;
  flex: 1;
  text-align: right;
  display: none;
  margin-right: 30px;
}
.navbar .toggle-bar .fa-bars {
  font-size: 20px;
  color: rgba(81, 141, 27, 1);
}
.navbar-tab {
  flex: 1;
  text-align: right;
  list-style-type: none;
}

.navbar-tab::before {
  content: "";
  position: absolute;
  height: 1px;
  background-color: rgba(46, 107, 13, 0.275);
  width: 65%;
  margin-top: 50px;
}
.navbar-tab .nav-item {
  display: inline-block;
  margin-right: 30px;
}

.navbar-tab .nav-item .nav-link {
  text-decoration: none;
  color: rgba(112, 112, 112, 1);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  text-transform: capitalize;
}

.navbar-tab .nav-item.active .nav-link {
  color: rgba(115, 147, 97, 1);
}

.active::before {
  content: "";
  border-radius: 50%;
  padding: 4px;
  position: absolute;
  top: 87px;
  background: rgba(115, 147, 97, 1);
  margin-left: 24px;
}

.searchForm input {
  border: 1px solid rgba(45, 93, 19, 0.565);
  border-radius: 50px;
  width: 222px;
  height: 33px;
  padding-left: 30px;
  text-align: left;
  font-family: Lato;
  font-style: normal;
  font-weight: lighter;
  font-size: 18px;
  color: rgba(112, 112, 112, 1);
}

.searchForm input:focus {
  outline: none;
}

.searchForm .btn-search {
  background: transparent;
  border: none;
  position: absolute;
  top: 55px;
  right: 20em;
  width: 33px;
  height: 33px;
}

.searchForm .btn-search .fa-search {
  font-family: Lato;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  color: rgba(45, 93, 19, 0.565);
}

.container {
  max-width: 1080px;
  margin: auto;
  padding: 0px 25px;
}
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col-2 {
  flex-basis: 50%;
  min-width: 300px;
}
.hero .hero-text {
  position: relative;
  top: 120px;
}

.hero .hero-text h2 {
  font-style: normal;
  font-weight: normal;
  font-size: 90px;
  color: rgba(81, 141, 27, 1);
  margin-left: -20px;
}
.hero .hero-text p {
  line-height: 40px;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  color: rgba(45, 93, 19, 1);
}

@media only screen and (max-width: 1024px) {
  .navbar .toggle-bar {
    display: block;
  }

  .navbar .navbar-tab,
  .searchForm {
    position: absolute;
    top: 120px;
    right: 70px;
    display: none;
  }

  .searchForm input {
    margin-top: -10px;
  }
  .searchForm .btn-search {
    background: transparent;
    border: none;
    position: absolute;
    top: -9px;
    right: 190px;
    width: 33px;
    height: 33px;
  }

  .navbar-tab::before {
    width: 100%;
  }

  .active::before {
    top: 25px;
  }

  .hero .hero-text {
    left: 50px;
  }
}

/* media query for less than 600 */
@media only screen and (max-width: 600px) {
  .navbar {
    margin-top: 20px;
  }
  .logo {
    left: 20px;
    top: 30px;
  }

  .navbar .toggle-bar {
    margin-right: 0px;
    color: rgba(81, 141, 27, 1);
  }
  .row {
    text-align: center;
  }

  .col-2,
  .col-3,
  .col-4 {
    flex-basis: 600px;
  }
  .hero .hero-text {
    text-align: center;
    left: 0;
    top: 80px;
  }

  .hero .hero-text h2 {
    font-weight: bold;
    font-size: 40px;
    color: rgba(81, 141, 27, 1);
    text-align: center;
  }
  .hero .hero-text p {
    line-height: 40px;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: rgba(45, 93, 19, 1);
  }
}

    </style>

_x000D_

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Landing page 1</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- <link rel="stylesheet" href="./css/style.css" /> -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    
  </head>
  <body>
    <header id="main-header">
      <div class="container-fluid">
        <nav class="navbar">
          <div class="logo">
            <a href="/index.html" class="navbar-brand"
              ><img src="./images/logo.png" alt="logo" class="img-fluid"
            /></a>
          </div>
          <a href="" class="toggle-bar" onclick="toggleBar()" id="toggle-menu">
            <i class="fa fa-bars"></i>
          </a>
          <ul class="navbar-tab" > 
            <li class="nav-item active">
              <a href="./index.html" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="./product.html" class="nav-link">products</a>
            </li>
            <li class="nav-item">
              <a href="./companies.html" class="nav-link">companies</a>
            </li>
            <li class="nav-item">
              <a href="./about.html" class="nav-link">about us</a>
            </li>
            <li class="nav-item">
              <a href="./blog.html" class="nav-link">blog</a>
            </li>
            <li class="nav-item">
              <a href="./about.html" class="nav-link">Login/Signup</a>
            </li>
          </ul>
          <form action="" class="searchForm">
            <input type="search" name="" id="" placeholder="Search" />
            <button class="btn-search">
              <span class="fa fa-search"></span>
            </button>
          </form>
        </nav>
      </div>
    </header>
    <section class="hero">
        <div class="container">
            <div class="row">
                <div class="col-2">
                    <div class="hero-text">
                        <h2>Welcome <br>To Captivist</h2>
                        <p>We’re here to help you make more informed decisions about consumer decisions.</p>
                    </div> 
                </div>
                <div class="col-2">
                    <img src="" class="img-fluid">
                </div>
            </div>
        </div>
    </section>
    
  </body>
</html>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • useEffect Error: Minified React error #321 (GTM…
  • jQuery Mobile: document ready vs. page events
  • Text size and different android screen sizes
  • How to get main JQuery Mobile page to display after…
  • Avoid creating new session on each axios request laravel
  • React Multi-level push menu SCSS Back button not working
  • Database development mistakes made by application developers
  • Specifying java version in maven - differences between…
  • How to highlight border color of input when on validation…
  • Could not calculate build plan: Plugin…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Find the first point where a line touches a convex hull

Next Post:

Why is php POST array empty for me in one instance and populated in another, both using XHR POST?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error