asked on

Portrait mode works. Landscape does not.

This webpage seems to be working fine in portrait mode on the phone but landscape the text tramps on the picture. Also on the desktop when you resize the window the picture hugs left.
https://eat-sweat-undress.com/about.php

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

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 35%;
  padding-left:10px;
}
.column2 {
  float: left;
  width: 65%;
  padding-left:10px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.page2 {
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 50px;
}
img {
   border-radius: 5px;
   }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column2 {
  float: left;
  width: 100%;
  padding-left:10px;
  padding-right:10px;
}
}
@media (max-width: 365px) {
img {
    width: 325px;
}
}
.Alexia {
    /*margin-top: 10px;*/
    font-weight:500;
   font-size:24px;
   margin-bottom: 10px;
}
</style>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

David Schure

ASKER

Hi Julian,
Thank you for the direction...This works.

.column {
  float: left;
  width: 35%;
  padding-left:10px;
  padding-right:10px;
}
.column2 {
  float: left;
  width: 65%;
  padding-left:10px;
  padding-right:10px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.page2 {
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 50px;
}
img {
   border-radius: 5px;
   width: 100%;
   }
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
   padding-left:10px;
  padding-right:10px;
  }
  img {
    width: 100%;
}
  .column2 {
  float: left;
  width: 100%;
  padding-left:10px;
  padding-right:10px;
}
}
@media (max-width: 365px) {
.column {
    width: 100%;
   padding-left:10px;
  padding-right:10px;
  }

  .column2 {
  float: left;
  width: 100%;
  padding-left:10px;
  padding-right:10px;
}

img {
    width: 100%;
}
}

Open in new window

Julian Hansen

You are welcome David.