Using HTML Media tags is completely ineffective

It took hours to try to get them working, but still nothing. I attempted using media="xx" and @media, but the CSS doesn't seem to work at all, or only one of them works. I can't locate an obvious error, and it's becoming frustrating.

<!DOCTYPE html>

<html lang="tr">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <link rel="stylesheet" href="1129.css" type="text/css">
</head>

<body>
<div id="header">
    <ust>MYO</ust>
    <p id="hosgeldiniz">Hoşgeldiniz</p>
</div>

<div id="content">What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>

<div id="footer"></div>

</body>
</html>

I also tried link => media="min-width" etc, but it's not working either.

CSS.

html body{
    margin:0px;
    padding:0px;
}

#header{
width:100%;
height: 10vw;
background-color:gray;
padding-top:40px;
text-align:center;
font-family: "Palatino Linotype", Times, serif;

}
ust{
    font-weight:bold;
    font-size: 3vw;
    letter-spacing: 3px;
    color:white;
}
#hosgeldiniz{
    font-weight:bold;
    font-size: 1.5vw;
    letter-spacing: 3px;
    color:white;
}


#content{
margin-top: 2%;
margin-left: 10%;
padding-right: 15%;
font-size:1.5em;
}


@media only screen and (max-width: 600px) {
    #content {
        font-size:0.1em;

    }

  }

This is primarily code; I should provide more information, but I am on the verge of falling asleep. This is primarily code; I should provide more information, but I am on the verge of falling asleep. This is primarily code; I should provide more information, but I am on the verge of falling asleep. This is primarily code; I should provide more information, but I am on the verge of falling asleep. This is primarily code; I should provide more information, but I am on the verge of falling asleep.

Answer №1

One thing that caught my attention right away was that your CSS filename starts with a number _

If you look up file-naming conventions on Google, you'll come across advice like "You should only use the letters a-z, numbers 0-9, underscores, and hyphens in your CSS file names ".

However, based on personal experience and stories from other programmers and developers, starting a filename with a number isn't something I would recommend.

Halfway down this web-page, there's a warning about using numbers at the beginning of a file name >>>

Additionally, as seen in the code snippet, I have not made any changes and your code functions perfectly.

This response may be lengthy, but I want to make a case for renaming your CSS file to something alphabetical, then ensuring that name matches in your stylesheet link... and testing if that works for you

html body{
    margin:0px;
    padding:0px;
}

#header{
width:100%;
height: 10vw;
background-color:gray;
padding-top:40px;
text-align:center;
font-family: "Palatino Linotype", Times, serif;

}
ust{
    font-weight:bold;
    font-size: 3vw;
    letter-spacing: 3px;
    color:white;
}
#hosgeldiniz{
    font-weight:bold;
    font-size: 1.5vw;
    letter-spacing: 3px;
    color:white;
}


#content{
margin-top: 2%;
margin-left: 10%;
padding-right: 15%;
font-size:1.5em;
}


@media only screen and (max-width: 600px) {
    #content {
        font-size:0.1em;

    }

  }
<!DOCTYPE html>

<html lang="tr">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="utf-8">
   <link rel="stylesheet" href="1129.css" type="text/css">
</head>

<body>
<div id="header">
    <ust>MYO</ust>
    <p id="hosgeldiniz">Hoşgeldiniz</p>
</div>

<div id="content">What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).


        Where does it come from?
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

        The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>

<div id="footer"></div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

Is there a way to prevent a background video from automatically playing whenever the user navigates back to the home page?

Recently, I was given a design that requires a background video to load on the home page. Although I understand that this goes against best practices, the client has approved the design and now I need to come up with a solution. The video is already in pla ...

Does Google Chrome have a strange way of interpreting CSS?

Almost done with my website and it looks great on Firefox and IE 8, but Chrome is causing issues. Here's how it appears on FF: And here's Chrome: Notice how Chrome resizes the first image even though the code is the same as the one below? Che ...

What is the best way to modify the inline style width of a table td from pixels to percentage in order to make it

<table> <tr style="height:15pt;"> <td style="width:229pt;border-style:solid;border-width:0pt;padding:3pt 9pt 3pt 0pt;" valign="bottom" bgcolor="#c0c0c0"><p style="font-family:Times New Roman, serif;font-size:10pt;font-style:norm ...

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

I've noticed that my question has been asked a few times already, but I'm still struggling to get my code working. It seems like I'm using the same code as those solutions, so I can't figure out what's going wrong. Currently, I am ...

Employ JQuery and Ajax to develop an autocomplete/suggestion feature that generates a list based on JSON data fetched from an API via PHP

I'm facing challenges in developing a dynamic auto-suggest feature for a search field using JQuery with data in JSON format. The JSON data is fetched from an API through PHP. The objective is to have the auto-suggest list update with each keystroke e ...

Angular animation not firing on exit

I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger. For reference, here is a link to stackblitz: https://stackblitz.com/edit/building-too ...

Modifying the value of an animated status bar using the same class but different section

I need the status bars to work individually for each one. It would be great if the buttons also worked accordingly. I have been trying to access the value of "data-bar" without success (the script is able to process the "data-max"). However, the script see ...

POST method error 400 encountered

Whenever I execute my ajax jquery function, I encounter a 400 error Here is my code. All Postman tests pass successfully, but when the web app runs, it fails. I'm not sure if it's a coding issue or something related to HTML5. Can anyone offer as ...

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Using a Material UI component, I added a custom class to my chip. Attached is a screenshot showing what I mean. Currently, I am attempting to change the color of the cross button to white. After inspecting the element, I discovered that it is an SVG ico ...

Tips for showing placeholder text on Safari

I'm having an issue with the placeholder attribute in Safari. It seems to be working fine in all other browsers, but not in Safari. <textarea class="concerncommentArea" placeholder="Place your comment here"></textarea> Does anyone know h ...

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

Increase the height of an element based on the content of the text within

Today I am facing a challenge: I need the text below to change when I click on one of these icons: https://i.sstatic.net/28xEF.png Luckily, it works with the following code: CSS .games-text { background-color: $color-primary; & p { m ...

Prevent ui-select from being highlighted when clicked

here's a dilemma : (all in angular 1) I'm using a ui-select like this : https://i.stack.imgur.com/RzH2u.png Here's the code snippet : <div class="formZone-group"> <div class="mandatory-fl"> <div class="man ...

Unable to delete data in Laravel 8

I am new to Laravel and facing an issue when trying to delete a row with a modal. The problem is that only the first row is getting removed and I can't figure out the reason. Here is my modal setup: <p class="card-text"><small clas ...

Alter the class of a div when a key is pressed

Whenever I press the down arrow key, the class of a div changes. However, the class only applies while I keep my finger on the button and gets removed when I release it. I would like the class to remain permanently. What am I doing incorrectly in this code ...

The voting system will increase or decrease by 1 to 5 during each round

Recently, I added a voting system to my website inspired by this source. It's functioning well, but there is an issue where each vote can sometimes count for more than one. You can view the source code on the original website and test it out live here ...