asked on 7/29/2021

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

CSS HTML

Last Comment

Julian Hansen

7/30/2021

ASKER CERTIFIED SOLUTION

Julian Hansen

7/30/2021

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

David Schure

7/30/2021

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

7/30/2021

You are welcome David.