HTML CSS Cross Browser Rendering Problem

hmcode · Jul 23, 2019

I've been trying to fis this issue for hours...literally hours. Renders fine on iPhone 7+ and full screen on desktop browsers such as CHrome, Firefox and Safari but layout is messed up on the sizes in between. When you open the file on a browser in full screen the page is fine but if you drag the window to a smaller size, the layout breaks until you reach 480 px. I am using only on CSS break point for 480 resolution. Getting a headache trying to resolve the issue. Attached is my code. Can anyone help me???

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

<title></title>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="generator" content="thesitewizard.com's Layout Wizard 2.0.1">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
body {
margin:0px;
background-color: #000000;
}

.content_wrapper_dv {
float:left;
margin:250px 0px 0px 225px;
display: block;
width: 70%;
}

.background_img_dv {
height:900px;
background-color: #000000;
background-image: url(https://ss-usa.s3.amazonaws.com/c/3...37986a9fc5c74965819033700/abudz_bgimage.png);
background-size: 100% auto; background-repeat: no-repeat;
}

.column_left {
display:inline;
}

.dv_abudz {
vertical-align: top;
width: 36%;
height: auto;
}

.dv_body_txt {
display: inline;
width: 56%;
margin:0px 0px 0px 35px;
}

.right_column_middle_txt {
display: inline-block;
width: 60%;
float:right;
font-family: arial, verdana, sans-serif;
color:#ffffff;
font-size: 18px;
}

.button_container {
float: right;
clear: both;
margin:50px 0px 0px 0px
}

.buttons {
float:right;
display: inline;
}

.dv_button_left {
margin: 0px 50px 0px 0px;
}

img.dv_button_widths {
width:280px;
height: auto;
display: inline;
}

@media only screen and (max-width: 629px) {
.background_img_mv {
height:900px;
background-color: #000000;
background-image: url(https://ss-usa.s3.amazonaws.com/c/3...45bf8e005373314448068/abudz_bgimage_480.png);
background-size: 100% auto; background-repeat: no-repeat;
}
.content_wrapper_mv {
float:left;
margin:80px 0px 0px 70px;
display: block;
width: 70%;
}

.mv_abudz {
width: 100%;
height: auto;
margin:0px 0px 0px 0px;
}

.mv_body {
width: 100%;
height: auto;
margin:40px 0px 0px 0px;
}

.mv_body_gtxt {
margin:20px auto;
width: 105%;
height:auto;
align-content: center;
}

.mv_right_column_middle_txt {
display: inline-block;
width: 100%;
float:right;
}

.mv_button_widths {
width: 100%;
height: auto;
display: inline;
}

.mv_button_left {
margin: 15px 0px 0px 0px;
}
}
</style>

</head>

<body>

<div class="background_img_dv background_img_mv">


<div class="content_wrapper_dv content_wrapper_mv">


<div class="column_left" style="">
<img src="https://ss-usa.s3.amazonaws.com/c/308475811/media/39855d3798c8a017f92500668139769/agency_budz2.png" class="dv_abudz mv_abudz" style="">
</div>



<div class="dv_body_txt mv_body">
<img src="https://ss-usa.s3.amazonaws.com/c/308475811/media/27765d3798e60eaad78905835779789/body_txt2.png" class="mv_body_gtxt" style="">
<div class="right_column_middle_txt mv_right_column_middle_txt" style="">
Marketing in the fast-growing cannabis industry is specifically regulated and we’ll guide you through every step of the way. We can help you build your brand; increase your sales; and grow your loyal customers. We have over 25 years of marketing experience.
</div>


<div class="button_container">
<div class="buttons mv_button_widths">
<img src="https://ss-usa.s3.amazonaws.com/c/3...37991732f4136589963196508/btn_learn_more1.png" class="dv_button_widths mv_button_widths">
</div>



<div class="buttons mv_button_widths dv_button_left mv_button_left">
<img src="https://ss-usa.s3.amazonaws.com/c/3...79956e88e525467760245290/btn_get_updates1.png" class="dv_button_widths mv_button_widths">
</div>

</div>
</div>

</div>

</div>

</body>
</html>

Search

Search

HTML CSS Cross Browser Rendering Problem

hmcode

New member

Similar threads