Website: http://wearetechnology.com/
We have custom social media icons in the header and the footer of the above site.
Everything looks fine on the computer, even when I resize the browser window but when we pull up the site on a smart phone the icons resize to different sizes (skinny, smaller, etc.).
We'd like them to stay the same size as on the regular site but I can't seem to find the correct area in CSS that is changing.
Here is the CSS that I am using:
.social-networks .facebook a{background-image:url(images/facebook-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .twitter a{background-image:url(images/twitter-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .linkedin a{background-image:url(images/linkedin-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .google a{background-image:url(images/google-wat.png) !important; width:32px !important; height:32px !important;}
I have added to the media.css file but nothing seems to work.
Any help is appreciated.
have you added this in your html head ?
<meta name="viewport" content="width=device-width, initial-scale=1" />
Related
I've been facing a strange problem in Microsoft Edge, I'm using Pseudo Selector :after to add an arrow to all the links in a paragraph but Microsoft Edge automatically changes the color to BLUE and above that you cannot even access the Pseudo Selector in Edge.
At first I thought, it was some theme styles, I set up a small html page with 1 link and Pseudo Selector but it changes color to blue here as well but works fine everywhere even in Internet Explorer!
Any help would be great.
No one seems to be facing this problem, I've searched some of the blogs.
<html>
<head></head>
<body>
<style>
a{
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
a:before{
content: "\25B6" !important;
padding-right: 10px;
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
</style>
Some Link
</body>
</html>
Your question is already answered in an other post:
Unicode displaying strange in Edge
Setting the font-family to:
font-family: "Segoe UI Symbol";
seems to do the trick.
I'm trying to get a 1200px page to display in a Samsung S7. Since the S7 has a 1440x2560 screen I would expect the page to display fine, but all I see is about the left quarter of it, with no ability to swipe left to see more. I tried adding a viewport meta tag:
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0" />
but I get the same results. Does anyone know how to get this page to display correctly?
The page I'm trying to display is at https://thebarcoderegistry.com/verify/?barcode=040232534218
Thanks
Your wrapper has overflow-x: hidden; Therefore the internal content is cut off when the width of #wrapper on the mobile phone is narrower than the width of the internal content.
Take overflow-x: hidden; off or change it to visible and you will be able to scroll to see the content.
I'm trying to learn how to use Google's Polymer 1.0 components by starting with a simple message dialog. The dialog appears, but it does not have the styling I see in Google's Polymer demos, so I'm trying to add style to the dialog to match what I see in the Google demos:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="scripts/polymer/paper-dialog/paper-dialog.html">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
paper-dialog {
font-family: 'Roboto', sans-serif;
font-size: 14px;
margin: 0;
padding: 24px;
}
</style>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
The padding value works fine, but the font family and font size are being ignored. I know the font is being downloaded ok because the "Test dialog" text briefly appears at the top of the page using the Roboto font just before the dialog appears. There are no errors in the console.
What is the proper way to get the dialog to accept the style I want? Note that I can wrap the dialog content with div that is styled with the desired font, but I doubt that's considered the proper way to do this in Polymer.
You may need to import paper-styles-classes.html
Based on your example, try adding
<link rel="import" href="scripts/polymer/paper-styles/paper-styles-classes.html">
or look for a similar file.
You could add <link rel="import" href="scripts/polymer/paper-styles/typography.html"> to get the default typography and fonts from the polymer project instead of explicitly specifying the font as Roboto as you did in your question.
<Paper-dialog> doesn't comes with text styling property. The default font-family set as Roboto. You may check more from here https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
What i would recommend for yours is to create a <div> container that wraps the text with custom classes.
I have tried similar outputs of yours in code.io here so you could see how the custom styling works.
Hope helps.
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
I'm developing Silverlight OOB application and I need to show web pages in it - I would like to do it through out WebBrowser control, but during page load I get lots of MessageBoxes with JavaScript errors.
Is there a way of hiding those MessageBoxes?
In winform WebBrowser control there is ScriptErrorsSuppressed property that can be used, but in SL there isn't.
I would be appreciated for any help.
Try turning off script debugging in the internet explorers advanced settings. Ultimately the control uses MSHTML to deliver the rendering, which in turn gets many of it settings from IE.
Today I've returned to this problem in my app and I was able to resolve it somehow. Because I need to show only a pages - without much user interaction on those pages - I solve it this way.
In code I create a html with iframe with attribute security="restricted" and then I inject url to this iFrame.
My code looks like this:
var html = new StringBuilder(#"<html xmlns=""http://www.w3.org/1999/xhtml"" lang=""EN"">
<head>
<meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
<title>{#pageTitle}</title>
<style type=""text/css"">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
</head>
<body>
<iframe id=""tree"" name=""tree"" security=""restricted"" src=""{#PageLink}"" frameborder=""0"" marginheight=""0"" marginwidth=""0"" width=""100%"" height=""100%"" scrolling=""auto""></iframe>
</body>
</html>");
html.Replace("{#pageTitle}", Title);
html.Replace("{#PageLink}", uri.ToString());
and then I'm using NavigateToString method of WebBrowser to load my html to it.
P.S. I've added this as an answer to accept this question.