1

When I view my web page on desktop/larger screen, there is no horizontal scroll bar, but when I view the page on smaller/mobile screen a horizontal bar appears. I don't want that horizontal bar to appear on any screen. Could you guys help me out on this matter, and point me to the problems in my code? Link to the web page

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      border: 0;
  }

html,
body {
      height: 100%;
      font-size: 100%;
      font-family: Arial, Helvetica, sans-serif;
     }

for the full code please follow the provided link.

Any help will be highly appreciable. Thanks.

bangali_babu
  • 15
  • 4

2 Answers2

0

let me explain the issue, in your codepen link https://codepen.io/testube/full/VBmewj/, you are showing the quote using css left: 56rem in the class cite. that is bad way of getting the result, you can set right: 0 instead or do it as shown below

instead of:

cite {
  text-align: right;
  position: absolute;
  left: 56rem;
}

use

cite {
  text-align: right;
  display: block;
}

i tested it on your codepen, it works fine. :)

Girisha C
  • 1,722
  • 1
  • 10
  • 17
  • Actually, I'm new to web development, self-learning through books and online resources. Though, the problem was actually solved with suggestion from @Girish, I've learned new things from both of them. Thanks guys. – bangali_babu Jul 20 '18 at 08:58
  • glad to help, always try to fix the issue, don't add hacks to resolve it for now. – Girisha C Jul 20 '18 at 09:03
0

In CSS you may add mediaquery code

@media only screen and (max-width: 960px) {
cite {
    left: 0;
    right: 0;
    width: 100%;

}
}
Sharanpreet
  • 351
  • 1
  • 2
  • 11