Hi I'm very new to coding in HTML and CSS and I have been trying to teach myself but I am struggling that being said I have been able to create this so far:
https://dimensionmediaml.000webhostapp.com/
Now the issue I have is that this website will work fine as long as it is being used on a certain sized monitor but anything smaller (have not been able to test anything larger) and the elements of the page end up looking like they are in the wrong positions
The site has proved to work at a resolution of 1920 x 1080
Any help would be really appreciated
Once again I am very new to this so please be patient with me :)
I have attached the code below and before people rip on me for putting the bootstrap code into the CSS sheet, it was the only way to get elements to display normally on my monitor when uploading the site to the server
HTML and CSS:
https://drive.google.com/drive/folders/0B_-tn2aR7tHXakZZQ1FleHVveDg?usp=sharing
You have Bootstrap but you don't override the css by using the way you did. Copy the styles you want and make a new document and name it custom.css, then upload that to the css folder on your server. Here is how to change the code in your html
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
Using width, height, top, bottom etc as percentages will never solve your problem. You must learn with #media queries in CSS3. Please visit this link http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
Related
I have this simple situation, I have an style with no defined display property value, I recently added bootstrap to my project with no major problems, just one.
In label bootstrap style is defined a display: inline-block; what I don't need and is causing some troubleshooting on my page. So simply I overwrite it, but it seems It's getting the bootstrap value. !important is not working also. As you can see in the image below:
Even, It's marked as overwritten on Developer Tools. I also tested removing the line from the bootstrap file and it works, but that's not viable option in my situation.
I'm stuck here, as I said, no more problems with bootstrap, and haven't had this situation before.
I have to add that I'm setting right position for style sheets on my page.
EDIT:
I'll attach the result and the expected result, when I remove the bootstrap style. It seems to be working even It is overwritten.
Expected result when bootstrap style is removed (this apply to in time Developer tools and when removing from bootstrap.css)
PS: IE as needed browser.
EDIT2:
Problem solved, It was related to IE version, our company gives support to IE only on this application, and the problem was that some previous change was forcing IE to run compatibility on version 5, for reason that anyone knows, switched to IE as standards and it's working.
Thank you all any idea or comment.
Problem was related as IE compatibility mode.
This worked for me:
My problem was the way I linked it.
example: lets say input tag inherited style from vendors file(say bootstrap), and say you are too far in the project and linking files the other way round screws up your layout then, create a new style sheet and link it after the bootstrap link.
<link rel="stylesheet" href="styleSheet.css">
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="newStyleSheet.css">//write the style for elements that you don't want styles from bootstrap to be inherited and link it this way.
right way of doing:
<link rel="stylesheet" href="bootstrapStyles.css">
<link rel="stylesheet" href="styleSheet.css">
My limited CSS knowledge is starting to catch up with me now and I'm not sure how to handle this particular situation, despite grappling over it in various forms for months.
So I was having this problem awhile back with my solid-color Bootstrap navbar where it didn't fully extend to the right side of the browser by a handful of pixels. I could never figure out why but I did figure out a while back that overriding .row with a margin-right attribute of 0, fixed this problem. Fast forward a few weeks, I just noticed that my grey content boxes are now off-centered, as in, the margins between the left side and content and the right side and content were not the same, clearly because of this change I had previously made.
Now I can offset this problem by overriding .row with a margin-left attribute of 0 (and then messing with padding in comparison to those values to get the desired effect) but I'm really just not sure if this is bad practice or not? As .row is one of the most used classes of all in Bootstrap, I feel like I'm hacking away when there must be a elegant solution (where one problem I can't figure out is how to apply the margin-right styling to certain outer rows and not in certain rows - which would be a nightmare to try and figure out where at this stage of my project). I did try for a little while to apply this margin-right: 0 attribute just to the specific rows I thought were the culprit for the navbar issue but in the end, I wasn't able to figure it out.
Any help is appreciated, thanks!
you should not change the css properties of a Bootstrap class, for many reasons: above all
you could create regression somewhere else in your site (as already happened to you)
you can't be sure what will happen to your site if you upgrade the bootstrap css to a new release
You should
add a specific ID or a specific custom class to the originary navbar that had that issue
then create a custom css file (that you will import in you web pages after importing all bootstrap css files)
add in this new custom css file a rule to the previous new ID/class for the navbar that fix the original problem
It sounds like you might be nesting a container within a container, or a similar nesting issue. I cannot tell without a code sample.
You shouldn't need to use a row on your navbar, bootstrap has its own classes for a navbar.
See http://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some snippets on how to do this.
Also you should never edit the bootstrap file, create an override file and put any changes you make into there. Make sure you link to the override file after the bootstrap file so that it cascades correctly. Like so:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
As title suggests. I've just uploaded this to my site: http://kach.olympe.in/llsif/rare.php
The layout is very simple, the CSS as well, but it doesn't show up. And it's only on this page. The homepage and another have exactly the same code skeleton (I basically copy/pasted and changed the content), but the CSS doesn't work. If I put it internally directly, then it works. Even when I change <link href="/css.css" rel="stylesheet" type="text/css" /> to the full path, the CSS still doesn't work and I seriously can't figure out why. Is there anything I'm doing wrong?
Try to add #charset "utf-8" into the first line of your css file may help.
I'm trying to incorporate this yui drop down menu control in a web page:
http://developer.yahoo.com/yui/menu/
I have it working for the most part but I discovered that one of the css files that I need to link to as part of the control mess up the formatting for the rest of my web page. This is the css file in question:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css">
and this is the guilty line:
body{text-align:center;}
I'm not that experienced with css, but this doesn't seem like the friendliest design. This property is being assigned to the entire body section of the html file and could (or does in my case) impact content separate from the yahoo stuff. I know that I can fix this by putting a div tag around my stuff and setting the text-align property back to what I want it to be, but I don't feel this should be necessary. Or am I missing something here?
You do need to add a div around your body. Just redefine body style in your CSS file like
body{text-align:left;} and make sure your CSS file comes after yahoo's css file.
You can also do it inline like
<body style="text-align:left;">
This will override yahoo's body declaration for text-align.