Copy link to clipboard
Copied
Hi there,
I have encountered another issue in developing mobile phone version of a website in DW. The issue is that in 414x896 Iphone XR version everything seems ok. But when I switch to 375x812 Iphone XS sie, then order is ruined, as pics and other elements change their fixed places creating a mess. Please see the screenshots.
Suggestions how to fix it are appreciated.
ThanksIphone XS mode, pics and line displaced
Iphine XR mode, pic and line are properly placed
Copy link to clipboard
Copied
Short answer: Don't write custom media queries. Use Bootstrap.
Long answer: We can't guess what's going on from screenshots. A top margin of negative 181% is not just odd, it's totally bizarre. If you're using negative margins to fix a problem, that implies you have other, much bigger issues going on. If you care to post a URL to your online page, we'll examine the problem and it's underlying code to help you find a solution.
Copy link to clipboard
Copied
I dont agree about NOT writing custom queries. I agree about margin-top: -181% being bizarre. This is obviously something to do with a code malfunction on account of some dodgy positioning implementation. If you're NOT hacking positioning then you should not get a split between the top set of images and the one beneath it.
Copy link to clipboard
Copied
Thank you for your responces. Unfortunately I have no idea how to change existing CSS sttyling to bootstrap. Besides my website is not online yet. am still working on it to make it responsive compatible with all mobile phone modes.
I am copying full CSS code below. Hope it might help you to suggest some ways.
Thanks
@charset "UTF-8";
@import url("webfonts/OldLondonAlternate/stylesheet.css");
.strong {
font-size: small;
color: #000000;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-left: -23px;
}
.strong {
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}
.vl {
margin-left: 4%;
margin-top: 0px;
margin-bottom: 0px;
}
body p {
margin-top: 0px;
}
.picheadline {
padding-top: 0px;
}
.lastsub {
}
.opjail {
}
@media screen and (max-width: 600px){
.opjail {
padding-top: 234px;
float: left;
}
}
@media screen and (max-width: 600px){
.lastsub {
width: 228%;
padding-left: 0px;
padding-right: 0px;
float: left;
}
}
@media screen and (max-width: 600px) {
.picheadline {
width: 271%;
margin-left: 52%;
font-size: 154%;
margin-bottom: 0%;
padding-bottom: 0px;
}
}
@media screen and (max-width: 600px) {
body p {
padding-top: 0px;
}
}
body {
margin-top: 0px;
}
body {
margin-top: 0px;
}
#firstH {
width: 28%;
font-size: 140%;
color: #000000;
text-indent: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: 0px;
}
@media screen and (max-width: 600px) {
#firstH {
width: 28%;
font-size: 60%;
color: #000000;
text-indent: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: 0px;
}
}
.sandwwich {
height: auto;
margin-left: 0px;
margin-top: 20px;
margin-bottom: 10px;
padding-bottom: 10px;
}
@media screen and (max-width: 600px) {
.sandwwich {
margin-left: 0px;
margin-top: 12%;
margin-bottom: 18px;
padding-bottom: 10px;
}
}
body {
margin-top: 0px;
}
#secT {
width: 28%;
padding-top: 1px;
}
@media screen and (max-width: 600px) {
#secT {
visibility: hidden;
}
}
#article {
width: 60%;
text-align: justify;
margin-top: 55px;
margin-bottom: 23px;
}
.articlehead {
font-size: 203%;
text-align: left;
word-spacing: 0%;
font-variant: normal;
font-style: normal;
text-transform: capitalize;
width: 90%;
}
body {
}
body {
}
#sechead p {
margin-top: 3px;
width: 75%;
}
#thirdhead p {
margin-top: 3px;
width: 75%;
margin-right: 0px;
margin-left: -23px;
border-spacing: 13px 25px;
}
.imgelv {
width: 75%;
margin-left: -8px;
margin-bottom: 0px;
padding-top: 4px;
padding-bottom: 0px;
}
@media screen and (max-width: 600px) {
.imgelv {
float: right;
margin-right: -66%;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
}
body {
}
.tal {
margin-left: 0%;
margin-top: 4%;
}
@media screen and (max-width: 600px) {
.tal {
margin-right: -89%;
margin-top: -578%;
margin-left: 0%;
margin-bottom: 0%;
}
}
.tal2 {
margin-top: 1%;
margin-left: -7%;
margin-right: 0%;
}
.genag {
margin-left: -7%;
}
.column a .subtitle.talsub {
margin-left: -7%;
margin-top: 1%;
padding-top: 3px;
margin-bottom: 0px;
padding-bottom: 1px;
}
.genelch {
margin-left: -7%;
}
.parl {
width: 75%;
margin-left: -8%;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
@media screen and (max-width: 600px){
.parl {
margin-bottom: -136px;
}
}
.column a .subtitle.nagsub {
margin-left: -7%;
}
.column a .subtitle.elchsub {
margin-left: -7%;
}
.firstsubline {
width: 75%;
margin-left: -1%;
border-style: ridge;
}
.secsubline {
width: 75%;
font-style: normal;
font-variant: normal;
font-size: medium;
font-weight: bold;
margin-left: -8%;
border-width: thin;
border-style: double;
}
.thirdsubline {
width: 75%;
margin-left: -4px;
}
.subtitle {
width: 65%;
margin-top: 6px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-transform: none;
margin-left: -8%;
}
@media screen and (max-width: 600px) {
.subtitle {
float: left;
margin-top: -410px;
padding-left: 0px;
margin-bottom: 122px;
padding-top: 316px;
margin-left: -18px;
margin-right: 68px;
}
.lasthead {
width: 147%;
margin-left: -21px;
}
}
@media screen and (max-width: 600px){
.lasthead {
width: 243%;
margin-left: -49px;
font-size: medium;
font-weight: bold;
}
body {
}
}
@media screen and (max-width: 600px){
}
@media screen and (max-width: 600px){
}
.secsubtitle {
width: 75%;
border-style: none;
font-weight: bold;
margin-top: 3px;
padding-left: 0px;
}
@media screen and (max-width: 600px){
.secsubtitle {
padding-top: 0px;
padding-bottom: 61px;
}
}
.linediv {
margin-top: 19px;
width: 56%;
margin-left: 1px;
padding-bottom: 0px;
border-top-left-radius: 0px;
border-top-style: dashed;
}
.imgelection {
width: 75%;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
margin-left: -8%;
}
#latest {
width: 24%;
padding-left: 0px;
padding-right: 0px;
margin-left: 74%;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: -18px;
margin-right: -1px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
font-size: large;
}
@media screen and (max-width: 600px) {
#latest {
}
}
body style {
}
.b {
margin-right: 16%;
margin-top: 5px;
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.headarticles {
border-bottom-color: #000000;
border-bottom-style: solid;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
text-align: justify;
margin-left: 6%;
border-spacing: 0px 0px;
line-height: 277%;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
width: 103%;
}
@media screen and (max-width: 600px) {
.headarticles {
font-size: 40%;
color: #FF0004;
margin-top: -86px;
visibility: hidden;
}
}
.lines {
font-weight: bold;
vertical-align: text-bottom;
margin-left: 20px;
margin-right: 0px;
width: 101%;
}
@media screen and (max-width: 600px) {
.lines {
font-size: 40%;
color: #FF0004;
margin-top: -86px;
visibility: hidden;
}
}
.snap p {
text-transform: uppercase;
width: 81%;
margin-left: -5%;
margin-top: 0%;
font-size: 94%;
}
#fourthdhead p {
margin-left: -8%;
width: 75%;
margin-top: 3px;
}
.fifth {
width: 75%;
margin-left: 0%;
margin-top: 10%;
}
.thirdhead p {
margin-top: 3px;
width: 75%;
}
.cimg {
font-size: 350%;
color: #FF0004;
}
@media screen and (max-width: 600px) {
.cimg {
font-size: 350%;
color: #FF0004;
margin-top: -86px;
}
}
.column {
width: 0%;
}
@media screen and (max-width: 600px) {
.column {
width: 70%;
float: right;
margin-right: 17%;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
}
}
.row {
margin-top: 13px;
margin-bottom: 0px;
width: 101%;
}
.row .column .imgelv {
padding-left: 0px;
margin-bottom: 0px;
}
.lastpic {
margin-left: -2%;
}
.footerline {
text-shadow: 0px 0px;
border-color: #CCB8B8;
margin-top: 66px;
padding-top: 0px;
padding-bottom: 0px;
}
body {
margin-top: 0px;
}
.footermenu {
margin-top: 9px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 60%;
}
body {
}
body {
}
body {
}
.downline {
margin-top: 46px;
margin-bottom: 35px;
padding-bottom: 0px;
}
.copyright {
font-size: small;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 400;
}
.contact {
font-size: small;
margin-left: 50px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.about {
font-size: small;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left: 50px;
}
.privacy {
margin-left: 50px;
font-size: small;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fa.fa-facebook {
width: 5%;
float: right;
margin-bottom: 0px;
margin-top: -21px;
margin-right: 55px;
}
.fa.fa-twitter {
width: 5%;
margin-left: 0px;
float: right;
margin-top: -22px;
margin-right: 23px;
}
.subtitle {
width: 75%;
text-align: left;
font-weight: bold;
font-variant: normal;
font-size: medium;
font-style: normal;
margin-left: -7%;
}
@media screen and (max-width: 600px) {
.subtitle {
width: 233%;
margin-top: -271px;
}
}
.firstsubtitle {
}
@media screen and (max-width: 600px) {
.firstsubtitle {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 9px;
}
body {
}
}
body {
}
.imgkar {
width: 75%;
margin-left: -8%;
}
.sixthhead {
width: 75%;
margin-left: -1%;
}
.firstline {
width: 56%;
padding-top: 0px;
margin-bottom: 0px;
border-style: solid;
border-width: thin;
margin-top: 5%;
margin-left: 0%;
margin-right: 0%;
}
@media screen and (max-width: 600px) {
.firstline {
margin-left: 11%;
width: 72%;
margin-right: 0%;
margin-top: 0%;
visibility: hidden;
}
}
.firstsub {
width: 75%;
border-style: inset;
margin-top: 5%;
margin-left: 0%;
border-width: 0%;
}
.secsub {
width: 75%;
border-style: inset;
border-width: thin;
margin-left: -7%;
margin-top: 5%;
}
.print {
margin-right: 0px;
font-size: x-large;
padding-top: 0px;
margin-left: 20%;
}
.fbshareimage {
margin-bottom: -8px;
margin-top: 11px;
margin-left: 10px;
}
.fbicon {
width: 4%;
margin-left: 0%;
}
.twiticon {
margin-top: -1px;
margin-left: 86%;
width: 4%;
}
.T {
margin-left: 77%;
}
.datearticle {
width: 21%;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: -44px;
}
.content {
width: 90%;
text-align: justify;
}
.allcontacts {
text-align: left;
margin-left: -7%;
}
.email {
}
#photosource {
font-size: medium;
font-style: italic;
text-align: left;
margin-top: 10px;
width: 90%;
}
.subphoto {
font-style: normal;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-weight: 400;
text-shadow: 0px 0px;
font-variant: normal;
color: #6D6C6C;
}
.contactus {
width: 43%;
font-size: 148%;
margin-top: 156px;
text-align: center;
margin-right: 0%;
margin-left: -10%;
}
.contactall {
margin-left: -8%;
font-size: large;
}
.contactfooter {
margin-top: 200px;
}
.search {
float: right;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: 34px;
margin-top: -13px;
}
.form {
}
.lastline {
width: 90%;
}
.allcontents {
width: 90%;
font-size: large;
}
.abouttext {
text-align: justify;
width: 75%;
padding-top: 20px;
}
.archive {
text-align: left;
margin-left: -120%;
margin-top: 18px;
}
.archiveline {
text-align: left;
margin-left: -184px;
}
body {
}
.vil {
margin-left: 0%;
}
@media screen and (max-width: 600px) {
.vil {
margin-bottom: -251px;
padding-top: 0px;
padding-bottom: 0px;
}
}
body {
}
.column a .secsubtitle.vilsub {
margin-left: 0%;
}
.corsub {
margin-left: 0%;
}
.upmenu {
width: 97%;
margin-left: 5%;
margin-top: 0px;
}
@media screen and (max-width: 100px) {
}
#mySidenav {
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
width: 0%;
display: inline;
padding-top: 0px;
padding-bottom: 0px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-top: 0px;
float: left;
}
.coro {
margin-left: 0%;
margin-top: 15px;
}
.linedate {
width: 30%;
margin-top: -39px;
font-size: small;
font-weight: normal;
font-style: normal;
text-shadow: 0px 0px #858383;
color: #373636;
font-variant: normal;
line-height: normal;
margin-right: 18px;
padding-left: 100px;
}
.imgemail {
margin-top: 0px;
margin-bottom: -1px;
}
.seventhhead {
width: 75%;
margin-left: -8%;
}
.fbimage {
margin-top: 0px;
margin-bottom: -7px;
}
#article div {
}
#article div {
}
.fbshare {
visibility: hidden;
}
.seventh {
margin-left: -7%;
width: 75%;
margin-top: 10%;
padding-bottom: 0px;
padding-top: 0px;
}
.Pic {
width: 27%;
float: right;
margin-right: 44%;
margin-top: 34px;
}
@media screen and (max-width: 600px) {
.Pic {
width: 70%;
float: right;
margin-right: 15%;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0%;
margin-left: 0%;
margin-bottom: 0%;
}
}
body {
}
body {
}
@media screen and (max-width: 100px) {
#mySidenav {
display: none;
margin-top: 0px;
}
}
.center {
margin-top: -85px;
margin-bottom: -2px;
margin-left: 0px;
padding-top: 0px;
padding-left: 1px;
padding-right: 31px;
margin-right: 0px;
}
.date .strong.ss {
margin-left: -21px;
margin-top: 0px;
}
@media screen and (max-width: 1000px) {
.center {
display: none;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
}
.motto {
margin-top: 0px;
margin-left: -18px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: medium;
font-style: normal;
font-weight: 400;
margin-right: 0px;
}
@media screen and (max-width: 1000px) {
.motto {
display:none;
}
}
.center p2 .motto {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
margin-left: 0px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 400;
font-variant: small-caps;
}
@media screen and (max-width: 600px) {
.center p2 .motto {
display:none;
}
}
.date {
margin-top: -40px;
margin-bottom: 53px;
margin-left: 21px;
padding-left: 0px;
padding-right: 0px;
border-radius: 0px;
padding-top: 5px;
margin-right: 0px;
}
@media screen and (max-width: 1000px) {
.date {
display: none;
margin-top: 0px;
}
}
hr {
padding-bottom: 0px;
background-color: #000000;
color: #000000;
text-shadow: 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
padding-top: 0px;
margin-left: 3px;
margin-right: 33px;
border-color: #000000;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 9px;
}
@media screen and (max-width: 1000px) {
hr {
display: none;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
}
#menu {
width: 830px;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 14px;
margin-top: -8px;
padding-bottom: 0px;
display: inline;
}
@media screen and (max-width: 100px) {
#menu {
display: none;
margin-top: 0px;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
h1 {
color: #000000;
font-style: normal;
font-weight: 400;
font-size: 45px;
padding-left: 0px;
padding-right: 0px;
-webkit-box-shadow: inset 0px 0px;
box-shadow: inset 0px 0px;
text-transform: uppercase;
font-family: OldLondon;
}
@media screen and (max-width: 600px) {
h1 {
display: none;
padding-top: 0px;
}
}
#menu ul li {
display: inline;
padding-left: 39px;
margin-left: 2px;
margin-right: 3px;
padding-right: 0px;
width: 880px;
padding-top: 0px;
padding-bottom: 0px;
font-size: large;
margin-top: 0px;
}
@media screen and (max-width: 1000px) {
#menu ul li {
display:none;
}
}
.centermenu {
margin-left: -66px;
padding-left: 0px;
margin-right: 45px;
margin-top: 8px;
padding-top: 0px;
padding-bottom: 0px;
}
@media screen and (max-width: 100px) {
.centermenu {
display: none;
width: 100px;
height: 0px;
}
}
.span {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}
@media screen and (max-width: 100px) {
span {
display: block;
padding-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px;
}
}
.header {
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
@media screen and (max-width: 600px){
.header{
}
}
body {
font-family: "Lato", sans-serif;
padding-left: 40px;
margin-top: 54px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 0px;
}
@media screen and (max-width: 100px) {
body {
display: none;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #FFFFFF;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
@media screen and (max-width: 600px){
.sidenav{
}
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 15px;
color: #000000;
display: block;
transition: 0.3s;
background-color: #FFFDFD;
font-weight: bold;
}
@media screen and (max-width: 600px){
.sidenav a{
}
}
.sidenav a:hover {
color: #000000;
margin-top: 0px;
}
@media screen and (max-width: 600px){
.sidenav a:hover{
}
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-width: 600px){
.sidenav .closebtn{
}
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
background-color: #000000;
}
.sidenav a {
font-size: 18px;
margin-top: 0px;
}
}
.img {
margin-top: -27px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: -34px;
margin-left: 0px;
padding-left: 0px;
}
@media screen and (max-width: 600px) {
.img {
width: 70%;
height: auto;
margin-left: 0px;
margin-bottom: -61px;
padding-bottom: 1px;
}
}
.wh {
}
@media screen{
.wh {
margin-top: 1px;
}
}
.ss {
margin-top: 0px;
}
* {
box-sizing: border-box;
}
@media screen and (max-width: 600px){
.ss{
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
}
.line2 {
margin-top: -18px;
margin-bottom: 0px;
padding-top: 0px;
}
@media screen and (max-width: 600px){
.line2{
margin-top: -11px;
margin-bottom: 0px;
padding-top: 0px;
}
}
p {
margin-top: 0px;
font-family: "Helvetica Neue";
margin-left: 0px;
}
@media screen and (max-width: 600px){
p{
}
}
a{
text-decoration: none;
color: black;
margin-top: 0px;
margin-bottom: 0px;
}
@media screen and (max-width: 600px){
a{
}
}
a:hover {
color: red; text-decoration:none;
}
@media screen and (max-width: 600px){
a:hover{
}
}
#latest {
isolation: isolate;
}
@media screen and (max-width: 600px){
#latest {
}
}
.mainhead {
}
@media screen and (max-width: 600px){
.mainhead{
}
}
.Pic {
margin-left: 0px;
}
@media screen and (max-width: 600px){
.Pic{
margin-top: 48%;
padding-top: 0px;
}
}
.secheadline {
}
@media screen and (max-width: 600px){
.secheadline{
}
}
.imgelect {
}
@media screen and (max-width: 600px){
.imgelect{
}
}
.imgelection {
}
@media screen and (max-width: 600px){
.imgelection{
}
}
.headarticles {
}
@media screen and (max-width: 600px){
.headarticles{
}
}
.lines {
border-bottom-style: double;
border-bottom-color: #000000;
margin-bottom: 20px;
padding-top: 24px;
padding-bottom: 17px;
}
@media screen and (max-width: 600px){
.lines{
}
}
.snap {
}
@media screen and (max-width: 600px){
.snap{
}
}
.thirdhead {
}
@media screen and (max-width: 600px){
.thirdhead{
}
}
.columnA {
}
@media screen and (max-width: 600px){
.columnA{
}
}
.about {
}
@media screen and (max-width: 600px){
.about{
}
}
.contact {
}
@media screen and (max-width: 600px){
.contact{
}
}
.footermenu {
}
@media screen and (max-width: 600px){
.footermenu{
}
}
.downline {
}
@media screen and (max-width: 600px){
.downline{
}
}
.copyright {
}
@media screen and (max-width: 600px){
.copyright{
}
}
.privacy {
}
@media screen and (max-width: 600px){
.privacy{
}
}
.linediv {
}
@media screen and (max-width: 600px){
.linediv{
}
}
.smallline {
}
@media screen and (max-width: 600px){
.smalline{
}
}
.secsmall {
}
@media screen and (max-width: 600px){
.secsmall{
}
}
.parl {
}
@media screen and (max-width: 600px){
.parl{
width: 232%;
margin-left: -50px;
margin-top: -441px;
margin-bottom: -187px;
}
.lastph {
}
}
@media screen and (max-width: 600px) {
.lastph {
margin-top: 17px;
margin-bottom: 0px;
width: 233%;
}
}
.secsubtitle {
padding-top: 0px;
}
@media screen and (max-width: 600px){
.secsubtitle{
padding-left: 0px;
width: 236%;
margin-left: -55px;
padding-top: 290px;
}
}
.firstsubline {
}
@media screen and (max-width: 600px){
.firstsubline{
}
}
.secsubline {
}
@media screen and (max-width: 600px){
.secsubline{
}
}
.thirdsubline {
}
@media screen and (max-width: 600px){
.thirdsubline{
}
}
.fifth {
margin-top: 0%;
}
@media screen and (max-width: 600px){
.fifth{
}
}
.imgkar {
}
@media screen and (max-width: 600px){
.imgkar{
}
}
.seventhhead {
}
@media screen and (max-width: 600px){
.seventhhead{
}
}
.seventh {
margin-top: 10%;
}
@media screen and (max-width: 600px){
.seventh{
}
}
.sixthhead {
}
@media screen and (max-width: 600px){
.sixthhead{
}
}
.firstline {
}
@media screen and (max-width: 600px){
.firstline{
}
}
.firstsub {
border-width: thin;
}
@media screen and (max-width: 600px){
.firstsub{
}
}
.secsub {
}
@media screen and (max-width: 600px){
.secsub{
}
}
body {
}
.search {
}
div.b {
position: absolute;
right: 0;
width: 270px;
height: 120px;
}
* {
box-sizing: border-box;
}
@media screen and (max-width: 600px){
div.b{
}
.firstline {
}
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
@media screen and (max-width: 600px) {
.column {
}
}
.imgelv {
padding-right: 0px;
}
@media screen and (max-width: 600px){
.imgelv{
width: 70%;
padding-left: 0px;
padding-top: 0px;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
@media screen and (max-width: 600px){
.column{
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
@media screen and (max-width: 600px){
.column{
margin-left: 92px;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
@media screen and (max-width: 600px){
.row{
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
@media screen and (max-width: 600px){
ul{
}
}
li {
display: inline;
}
@media screen and (max-width: 600px){
li{
}
}
.fa {
padding: 20px;
font-size: 20px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 100%;
}
.fa:hover {
opacity: 0.7;
}
@media screen and (max-width: 600px){
.fa{
}
}
.fa-facebook {
background: #3B5998;
color: white;
}
@media screen and (max-width: 600px){
.fa-facebook{
}
}
.fa-twitter {
background: #55ACEE;
color: white;
}
@media screen and (max-width: 600px){
.fa-twitter{
}
}
.linedate {
margin-left: 4%;
}
@media screen and (max-width: 600px) {
.linedate {
font-size: 40%;
color: #FF0004;
margin-top: -86px;
visibility: hidden;
}
}
.lastpic {
}
.vil {
}
.vilsub {
margin-top: 9px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
@media screen and (max-width: 600px){
.vilsub {
width: 228%;
padding-left: 0px;
padding-right: 0px;
float: right;
margin-right: -96px;
margin-top: 195px;
}
.lasthead {
}
}
.coro {
}
@media screen and (max-width: 600px){
.coro {
margin-top: -165px;
margin-bottom: 36px;
width: 234%;
margin-left: -53px;
}
}
.corsub {
}
@media screen and (max-width: 600px){
.corsub {
margin-top: -307px;
margin-left: -50px;
}
}
.tal {
}
@media screen and (max-width: 600px) {
.tal {
width: 234%;
margin-top: -605%;
}
body {
}
}
.tal2 {
}
.genag {
}
@media screen and (max-width: 600px){
.genag {
margin-top: -46px;
padding-top: 0px;
width: 233%;
margin-right: -97px;
}
}
.genelch {
}
.nagsub {
}
@media screen and (max-width: 600px){
.nagsub {
margin-top: -299px;
width: 221%;
margin-bottom: 0px;
float: right;
margin-right: -83px;
}
body {
}
}
.elchsub {
}
.talsub {
}
@media screen and (max-width: 600px){
.talsub {
width: 233%;
padding-left: 0px;
padding-right: 0px;
float: right;
margin-right: -96px;
margin-top: -169px;
}
}
.firstsubtitle {
margin-left: 0px;
width: 75%;
}
@media screen and (max-width: 600px){
.firstsubtitle {
margin-top: 27px;
width: 231%;
margin-left: -53px;
}
}
.upmenu {
}
@media screen and (max-width: 600px){
.upmenu{
margin-top: 83px;
}
}
Copy link to clipboard
Copied
"Unfortunately I have no idea how to change existing CSS styling to Bootstrap."
You don't. You throw out what you have and start over with a Bootstrap layout. Then simply add dynamic or static content to your new layout.
I realize some skilled coders around here don't like Bootstrap. That's fine. They know what they're doing. But for someone who has no idea what they're doing in RWD, Bootstrap provides a logical 12-box grid system for creating responsive designs that work the first time. And best of all, frameworks save you from hours & hours of tedious manual coding. So don't work harder, work smarter with Bootstrap.
Copy link to clipboard
Copied
Thank you. But I am afraid I tried, but it just simply threw my existing coding, which I have spent more than a year to prepare, into another mess. Below the website seems ok. With Iphone XR version it is also ok. But when switch to Iphone XS mode, it is again mess. The coding is the one I sent to you.
I tried to add the coding to a new bootstrap file, but it again went mess.