CODEWITHSUNDEEP
htmlcss
Stephen Nollan
Stephen Nollan

Reputation: 153

Making site dynamic so it works across screens

I have a site on which there is pre written html (which we cannot change). We can, however, write our own CSS to make it look visually attractive.

The problem is that the site runs great on laptop but my CSS doesn't work on phone screens. I know little about CSS and have no idea about JavaScript (which people say are more dynamic).

The HTML code is huge and I was wondering if I can get the solution without it.

I started with html tag like:

html{

I believe I have to change something in that. I am new with all this so please pardon me for such a question. Thanks a lot.

Upvotes: 0

Views: 120

Answers (3)

Lieutenant Dan
Lieutenant Dan

Reputation: 8284

You essentially need to modify and extend your CSS to cater to a variety of screen sizes and resolutions based on the devices and browsers you'll support.

You can do this via an adaptive or responsive methods. This stuff is nothing new.

Adaptive method would be easier, where you'll be basically declaring a separate style-sheet per supported resolution - but responsive is the better practice; where you'll ultimately write your CSS in a fashion that responds to layout and resolution changes.

HTML is not an issue. Take a look at your CSS and the browsers / devices you want / need to support and research some of the info I outlined above. Hope this helps.

Upvotes: 1

bjesua
bjesua

Reputation: 319

Absolutelly you have to use Media Queries .

This is an example:

HTML.

<div class="caja"> 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nulla 
     massa, hendrerit non rutrum sed, blandit vestibulum velit. Cum sociis 
     natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
     mus. Mauris ut volutpat mauris, et fringilla sem.
   </p> 
</div>

CSS.

p {
  margin: 0;
  padding: 20px;
  background: #f1f1f1;
}

.caja {  
  margin: 0 auto;
  width: 500px;
}

@media only screen and ( max-width: 700px ) {
  .caja {
    width: 100%;
  } 
}

This will be the result.

result of media queries

You can check this links and make sure how to adapt to any device or screen size you want.

https://www.sitepoint.com/creating-media-queries-for-responsive-web-designs/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Upvotes: 0

user7351238
user7351238

Reputation:

You'll probably want to be using media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Without seeing the HTML it's difficult to say exactly what you need to do with media queries, but that'll be the most likely thing to make the site look good on mobile phones as they allow you to dynamically change stylings dependent on screen size (among other things).

This is known as Responsive Web Design.

Upvotes: 1

Related Questions