I am attempting to apply some elements of responsive design to a site. My goal is to hide the right side based on screen width. I've been able to get the behavior to change on my desktop (when minimize the window) as well as my iphone. But, my andriod is still displaying the right side just like the full desktop site.
I had the max-width set to 750px, but increased it to 1000 to try and get the andriod to do something, but still not luck.
My CSS looked like this originally:
#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}
To the CSS, I added this media query stuff:
#media all and (max-width: 1000px) {
#container {
width: 95%;
margin: 5px auto;
padding: 5px;
}
#rightnav {
display:none;}
I don't have it perfect, but on a minimized desktop screen or my iphone4, the right side doesn't display, indicating that the responsive design is working. However, on the andriod the CSS isn't responding at all.
As always, thanks in advance...
Add a viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Related
I am facing an issue where few images are not properly shown on firefox, chrome, edge browser but internet explorer it perfectly fine. Some part of code is as below.
.header_top-left1 {
float: left;
padding-left: 8px;
}
.header_top-left1 a {
float: left;
padding-left: 2px;
color: black;
display: inline-block;
font: bold;
font-size: 18px;
position: relative;
}
.header_top-left1 a img {
width: 20px;
height: 15px;
display: block;
}
<div class="header_top-left1">
<a href="callto:"> <img src="https://via.placeholder.com/350x300" alt="Call" />
Call
</a>
</div>
What i see on the first look is that you missing the units in width property.
Your code:
.header_top-left1 a img {
width: 20; // hast to be 20px for example
height: 15px;
display: block;
}
It looks as though IE is ignoring the Fontawesome classes and just showing the png green backed phone image while the other browsers are attempting at least to use fa.
Your given code doesn’t show any setting up of the font. Is this done somewhere?
I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand.
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):
admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:
Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\">Admin Options</div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\">Record------</div>
<div class=\"a-div\">Manage -----</div>
<div class=\"a-div\">Manage my account information</div>
<div class=\"a-div\">Add a ----</div>
$admin_str
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
Code for admin.php (php also renders it):
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\">Add a new approved email</div>
<div class=\"a-div\">Back to main options</div>
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the 1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }
admin.php - #subheading { font-size: 3.022726vw; }
It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">
Without viewport tag:
Both pages with viewport tag:
I believe the issue is in applying body font-size as 100%. There're two ways of solving the issue: replace font-size: 100%; with font-size: 1rem; or with font-size: 16px; Bootstrap for example uses font-size: 1rem;.
If it doesn't help open Devtools of your browser, open a page with smaller font-size and inspect font sizes of and texts. It might be overwritten by some additional styles.
<style>
body {
font-family: sans-serif;
font-size: 1rem;
}
I want to find a way to make hexagons be a good looking container for text at all window widths. At this point it only looks alright at a few window widths. I'd like to make it so that I can have code that will only show at the good width then hide itself when the screen width changes to a new range so that a new piece of code that does look good can take its place. How am I to do this?
My php code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
//for Medium screen width
print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
$numHexes=3;
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \">\n";
print" <span class=\"text\">XYZ</span>\n";
print" </div>\n";
}
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \" style = \"
margin-left:auto ;
margin-bottom: auto;
\">\n";
print" <span class=\"text\">XYZ</span>\n";
print"</div>\n";
}
print"</div>\n";
//for Small screen width
/*Code for that goes here*/
?>
</body>
</html>
My SASS code:
$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;
.hexagon {
position: relative;
display:inline-block;
width: $hex-size;
height: $hex-height;
background-color: $hex-color;
margin: $hex-height/2;
margin-left:auto;
margin-bottom:auto;
left:-10px;
}
.hexagon .text {
position: absolute;
top: -80px;
left: 0;
font: 12px sans-serif;
color: #ff00ff;
width: $hex-size;
height: $hex-height;
text-align: center;
overflow: hidden;
line-height: $hex-height;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: $hex-size/2 solid transparent;
border-right: $hex-size/2 solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: $hex-height/2 solid $hex-color;
}
.hexagon:after {
top: 100%;
left: 0;
width: 0;
border-top: $hex-height/2 solid $hex-color;
}
It seems your asking for a few different things here. Displaying only certain elements at certain screen sizes, and formatting elements so they are suitable for most if not all screen sizes.
#media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px */
}
}
Note that you can use both max-width and min-width
Hope this helps!
One possible solution is to use the #media CSS rule Which can apply different styling based on different display media. In your case, to customize based on screen size you could use the min-width and max-width properties.
This example would hide someElement if the screen was smaller than 200 pixels wide.
#media min-width: 200px {
someElement {
display: none
}
}
I have coded a website for a client. It is responsive and works perfectly on most devices ex: IPad landscape and portrait as well as IPhone. The client is using a Macbook and is telling me that the images are skewed when viewing from his device, so my question is do I need to add something like
#media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
}
}
here is the code for that particular area.
.DisplayAds_Grid { width: 100%; float: none; display: inline-block; margin-top: 20px; vertical-align: top;}
.DisplayAds_Grid .Banner_Wrapper { width: 18%; min-height: 178px; float: none; display: inline-block; vertical-align: top; background-color: #fff; margin-bottom: 5px; margin-right: 5px; text-align: center; border: 3px solid #dfdfdf; padding: 10px; }
to my media queries so that it looks the same on his device. I haven't had this problem before, so any help would be great. The site is http://www.verobeach.com and more specifically he is speaking about the featured businesses. Thanks
I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;