i am begginer so plz dont mind my silly doubts. I am trying to make my text -movies , tv shows , games responsive . what should i do? i tried media query but i think i got it wrong . Plz try to make it simple since i am just a beginner.
First, as with getting all websites to become responsive and adhere to media queries, the viewport meta tag must be placed in the <head> section of your web page. The basic standard version of this is shown below.
I’m sorry, but I don’t understand what you’re asking. In web design, the term “responsive” is used to refer to a layout which changes to fit a any size of viewport. I don’t understand what you mean when you ask about making text responsive.
Perhaps if you explain what you’re trying to achieve - and maybe include a sketch of the layout you’re attempting - we would be able to offer more relevant advice. Your current code seems unnecessarily messy and complicated, and there may well be a better way to achieve your aims.
in my code the text movies , games , tv shows are placed horizontally . I want it to be placed vertically as the screen decreases like on a phone. And also i have reduced my code here it is.
It won’t behave as you wish because you’ve placed each word in a <div> with a fixed position. Remove the rules you have for those three divs and replace them with display:inline-blockorfloat:left and they’ll wrap at narrower screen widths.
Which one is better will depend on the rest of your design, which is why I asked you to show us the layout you want to achieve.
Fixed or absolute positioning are generally only required for small areas of a design (if at all) and should be used very sparingly. Don’t use them for general layout - especially if you are aiming to make a site responsive. This article explains how those properties work: http://tympanus.net/codrops/css_reference/position/
Are you intending these to be links to other pages? You’re not adding any text to the headings? (I’m asking, because if this is the case, there is a better way to mark up your page; <h1> tags are not appropriate if they are not the headings for actual content.
Something like this should do what you want. You have a list of links, not headings, so mark them up as a list. Never choose an HTML element based on how you want it to appear. Choose the element which best describes the content - paragraph, heading, list etc. - and use CSS to style it as you please.
If there’s anything in there you don’t understand, please ask.
Perfect exactly what i wanted . thanks a lot . ill keep in mind whatever u told me to do. what should i change to increase the space between the text movies , games, tv shows and i need to make it go down almost center of screen.
This uses Flex box, with inline-block as a fallback for older browsers.
I also tidied up your code to remove unnecessary and obsolete parts.
There were a few things wrong:-
I guess you intended this element to be a background image. The best way to add a background image is using the background-image property, surprisingly enough.
#one {
position: fixed;
top:180px;
left:200px;
}
This is a perfect example of how you don’t make a page responsive.
By using a fixed or absolute position and setting the position in pixels (“magic numbers”), you effectively set the page in concrete. It is totally rigid, the opposite of responsive. The key is to keep everything fluid and avoid setting positions like this.
There is no need to wrap a block element in a <div>, you can apply a class or id directly to the element: <h1 id="one">
<div align="center">
These layout attributes are obsolete, use css to do this kind of thing.
To centre a block element use margin: auto to centre inline elements use text-align: center on its parent block.
It is important that you study the code and try to understand how and why it works.
This is a good reference about flex which may help you understand it.
Note that this will not work in IE 9 or earlier, that is why I added display: inline-block as a back up for the old browsers.
