• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

website mobile versions in DW

Community Beginner ,
Jun 11, 2020 Jun 11, 2020

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 displacedIphone XS mode, pics and line displacedIphine XR mode, pic and line are properly placedIphine XR mode, pic and line are properly placed

Views

435

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2020 Jun 11, 2020

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.  

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 11, 2020 Jun 11, 2020

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 12, 2020 Jun 12, 2020

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;
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 12, 2020 Jun 12, 2020

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.  

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 12, 2020 Jun 12, 2020

Copy link to clipboard

Copied

LATEST

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.

 

Screen Shot 2020-06-13 at 10.50.51 am.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines