I am having a frustrating issue with Google Chrome for the first time.
I have a site that has started to get pretty heavy with graphics and today I started seeing blue sections over certain parts of my page. See the graphic below.
I have tried to back out any changes and remove some graphics to lighten the page up but I am still seeing blue bars and sometimes the blue fills the full background.
I'm using transparent PNGs heavily and am creating a side scroll scene but haven't had any problems until now. Why does Chrome place these blue bars on my page? Thanks for any help you could offer.
REMOVE BACKGROUND COLOR FROM YOUR HTML.
eg: <table style="background-color: rgb(208, 208, 208);" align="center" border="0" cellpadding="0" cellspacing="0" width="960">
To: <table style="background-color: transparent;" align="center" border="0" cellpadding="0" cellspacing="0" width="960">
And Declare Graphics image ONLY!! Not BACKGROUND COLOR
Hope this helps.
Related
I'm trying to achieve something but i don't know the right way to do this. Hopefully someone can help me in the right direction.
With responsive images the image will get smaller as soon as the screen is as big as the image and then the image will get smaller together with the screen (if I'm right). But i am trying to make an image get smaller as soon as the screen gets smaller.
This is the page https://videosafari.nl/banner-test/ and it's about the red logo (NPO1).
The actual problem is that the images underneath the logo get smaller when the screen gets smaller but the logo stays the same size. I want the logo to stay in proportion with the images underneath it so i would like it to get smaller to. Any suggestions?
.carousellogo {
display: inline-block;
margin: 0px 0px 12px 30px;}
<div class="carousellogo"><img src="https://videosafari.nl/wp-content/uploads/800px-NPO_1_logo_2014.svg_.png" alt="" width="75" height="" class="alignleft size-full wp-image-23274" /></div>
The original image is width="149" height="100" but i made it smaller to make sure the image stays sharp at retina screens. width="75" height="".
I hope I was clear enough and thank you for taking the time to read my question. BTW i am just a beginner with css and html.
Have a nice day and stay safe.
you can use width: calc(4vw + 30px); on .carousellogo to control the width of the element to 4% of the viewport and add another 30px to it. I tested the code calc(4vw + 30px) looks perfect for your site on both desktop and mobile. Hope it helps.
How do you display a very big image on mobile?
For example, the following will appear on desktop but will not appear on my iPhone:
<img src="someReallyBigImage.png" width="4096" height="4096" />
Anybody able to display such a big image on their mobile browser?
Thanks!
Maybe this is not the solution to your problem but adding the responsive class to your image might solve the problem:
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%; and
height: auto; to the image so that it scales nicely to the parent
element.
<img src="..." class="img-responsive" alt="Responsive image">
I have an image I use as a ruler between content. It's a simple 1px x 1px image that I stretch out depending on the size I need.
If I stretch it to, say, 250px wide and leave it at 1px in height, it will not show up in IE (I'm currently on 10, but it doesn't show on the earlier versions either). It does, however, show in Firefox and Chrome. If I raise the height to 2px, it will show in IE, but it is too thick in the other browsers that could view it at 1 px in height.
example:
<img src="images/blackline.jpg" style="margin-top:35px; margin-bottom:20px;" height="1" width="275"><br>
NEW TEXT ITEM HERE<br>
<img src="images/blackline.jpg" style="margin-top:35px; margin-top:20px;" height="1" width="275">
Anyone know a way to get this to work properly?
Setup:
I am trying my hand at an email with responsive design. Let me say up front, I am experienced enough that I expect there to be email clients that I can't control for. However, the one I am having trouble with now, that I would like to find a work around for, is Outlook 2011 (for Mac).
I am using inline CSS on a main <table> to establish a min- and max-width, and then setting my header image to a 100% width. This will obviously fail in Outlook (creating a HUGE image), so I am using conditional comments to give Outlook clients a <table> around the first that has a fixed width.
Example:
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0px 0px 0px 0px; width:600px; border:0px; background-color:#000000;"><tr><td><![endif]-->
<table cellpadding="0" cellspacing="0" border="0" style="margin: 0px 0px 0px 0px; max-width:600px; min-width:150px; width:100%; background-color:#FFFFFF; border:0px;">
Problem:
I can't get Outlook 2011 (the one for Mac) to recognize any conditional comments. Further, it won't handle the max- and min-width styles. I tried testing for mso and mso version, IE, even for non-Windows machines (<!--[if !(WindowsEdition)>), but none of these is recognized by this version of Outlook (though my GS3's email client did recognize the non-Windows test).
Does anyone have any way to test for this version of Outlook?
#astangelo,
I just designed a new responsive email template for my employer, and came across the EXACT same issue with Outlook for Mac.
After googling a bit, I found out that oddly enough (and in really great news), Outlook 2011 for Mac uses the Webkit rendering engine, not Microsoft Word.
So, you cannot target it using conditional comments that you usually would for other PC-based versions of Outlook.
All you need to do is add an #media query in your head styles and specify a max-width using (preferably) a table["attribute"="property"] selector.
I just did this and tested it and it finally fixed my issue.
Make sure you use Premailer's CSS inlining tool, and 'Check' the 'Don't remove or from the head', otherwise your #media query won't come through and the trick won't work.
I hope this helps!
Sincerely,
Robert
This is kind of a shot in the dark, but it is worth a try because i'm about 99% sure it will work. Outlook 2011 for Mac uses webkit to render email. So targeting webkit by using
#media screen and (-webkit-min-device-pixel-ratio:0) {
body { }
}
should work.
Be careful to check all previous working email clients after doing this because you could be targeting those as well.
Let me know!
As far as I'm aware there is no conditional comment for 2011, I've tried a few things but had no joy.
However if you set the height and width of your image in the html element it wont appear huge. Then set it to 100% in a media query.
<style>
#media screen and (max-width: 600px) {
.headerimage{
width:100%;!important;
height:auto;!important;
}
}
</style>
<img src="xxx" height="100" width="600" class="headerimage">
How do I resize the visible portion of my image inside postbox-inner? How do I resize the overall box of postbox-outer?
I'm basically looking for smaller images because a lot of them are invariably low-res and tend to pixelate in ugly ways, or alternately a way to resize my grid.
Preferably both.
<!--{block:Photo}-->
<div class="postbox-outer">
<div class="postbox-inner"
<a href="{Permalink}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0" />
{block:Caption}<span class="desc">{Caption}</span>{/block:Caption}
</a>
</div>
</div>
<!--{/block:Photo}-->
As I understand it, you want the images to be displayed at it's best possible size. If it's a huge image you want it constrained within the div. If it's a small image you don't want it to fill the div. The best thing I could suggest is to set the max-width for the image to 100%. Here's the CSS rule:
img { max-width: 100%; }
Hopefully this should work out fine. Do let me know if this answers your question.