Side and content width

Travelify
1

I am currently using “Travelify” theme and woocommerce plugin.

I have set a left sidebar for my theme. However, there is a big gap between the left sidebar and the main content.

I want it to be like below:-

I browse through and found the following solution:-

#secondary {
margin-left: 1.5%;
width: 20%;
}

#primary {
margin-left: 1.5%;
width: 78%;
}

#content-woocommerce {
margin-left: 1.5%;
width: 75%;
}

It just look nice in desktop version. However, when i preview in mobile, the alignment for left side bar are running out.

any idea ?

thanks.

2

Use CSS @media queries to use theme default styling on mobile and apply changes only on tablets and desktops.

@media only screen and (min-width: 767px) {
  #secondary {
    margin-left: 1.5%;
    width: 20%;
  }

  #primary {
    margin-left: 1.5%;
    width: 78%;
  }

  #content-woocommerce {
    margin-left: 1.5%;
    width: 75%;
  }
}

How many websites you have already created based on Travelify theme for your clients?