When viewing an email with images off in Gmail, embedded styles will initially load correctly. However, if you click the “Display images below” link to turn images on, that causes Gmail to re-render the email markup with a different prefix for the class names and IDs.
The problem is, the email is still being styled with the previous version of the stylesheet, without updating the prefixes to match the current markup.
This means any CSS rule that depends on class name or ID selectors will stop working the moment images are turned on, leaving only element name or wildcard selectors.
I am currently using mailchimp to pass in an image, but I don't have access to that image element in the code (just the merge tag |IMAGE|) When this issue arises in Gmail, I can't access that image element. Any idea how to accomplish this?
<style>
.share-img img{
max-width: 60%;
margin-bottom: 5px;
}
#media screen and (max-width: 480px){
.share-img img{
max-width: 90%;
margin-bottom: 5px;
}
}
</style>
<div class="share-img" style="text-align: center; width: 100%;">*|IMAGE|*</div>
edit:
Here's an example of how gmail prepends classes/ID's with unique strings. The stylesheet 'share-img' class and the actually 'share-img' class have 2 different strings before them thus it is not resizing the image properly.
gmail inspect element image
try removing the space before 480px in your media query. Gmail is very annoying with CSS support. I have a feeling that's breaking it. Use the below code and see if it works now.
#media screen and (max-width:480px){
.share-img img{
max-width: 90%;
margin-bottom: 5px;
}
}
Cheers
Related
I'm having a problem in the mobile version of my desktop. It's an edited versione of the classic theme for prestashop 1.7.6. Here's a link to the website.
In the footer, I have 2 consecutive divs, each one with its content. The first div has the block_myaccount_infos ID, the second one has the block-contact class.
The first div has a custom JS which should display the dropdown content, similar to the two sections before that. Since I noticed that the JS wasn't being executed, I used the chrome inspector tool, and I found out that the second div is overlapping the first one.
I tested adding a tag inbetween, which works, but it's not a valid solution to me since i need the two divs to be on the same line in the desktop version.
I see that you have
#media (max-width: 1025px)
#footer #block_myaccount_infos {
width: 34%;
display: inline-block;
float: left;
in your css. The issue is caused by that float: left;
If you alter or removed that and the <br> in your HTML, it should fix your issue. Hope that helps.
I am working on website http://torquebranding.com/ , Images under THE PROCESS sections transferring to left as soon as screen resized.
I tried
margin-left:auto;
margin-right:auto
to make it center aligned , but failed.
Any suggestions ?
Thanks
You have this rule in your css. If you override it or remove it, the images are centered
processTabs {
margin-left: 50px;
}
Here are before and after pictures - see the processTabs rule in the dev tools side bar. In the before picture, the class is checked and in the after the class is disabled.
Your page is using different media styles with different page sizes.
For example, I have changed .processTabs added margin in media version 1.0.0.193. It works. Also, it is always good to use percentage instead of using px.
.processTabs { margin: 0 -2%;}
(sorry, had an error due to copying in there - edited... -> 0px )
This rule:
.processTabs
{
margin-left: 50px;
}
is included as an inline style (maybe added dynamically by some plugin or framework) in your HTML document, on line 689. This causes the problem you wrote about in the question. To fix it, remove that rule, or if can't do that (because of some plugin adding it) overwrite it with the following in your stylesheet:
.processTabs
{
margin-left: 0px !important;
}
tldr: I want to create simple theme, based on 2 columns with just pictures, that fill the whole screen, like this - http://half-way.precrafted.com/
Hello.
I started learning html/css yesterday, because i want to create rather simple theme that would fit my needs.
However, it turned out to be harder than i thought, unfortunately.
I post only pictures, without any captions or tags. All i want is theme based on 2 grids, where whole screen is occupied with pictures (except header on top). This is the best, almost exact example of what i want - http://half-way.precrafted.com/
However, the issue is that tumblr allows photoset with maximum width of 700px. This may be overriden with javascript - and i found such scripts, but it uses fixed values, so it won't really fit to any screen - just mine.
Set the photosetrow class to:
<div class="photoset_row photoset_row_2">
The CSS for this:
width: 400px;
white-space: nowrap;
overflow: hidden;
margin-top: 10px;
.photoset .photoset_row .photoset_photo:first-child {
margin-left: 0 !important;
}
.photoset .photoset_row .photoset_photo {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
I literally pulled that CSS from looking at the source code of that page you posted.
It seems the most important one is the photoset_row_2
I am currently trying to use Joomla to create a simple website. I uploaded Joomla Extension Survey called Form Maker Lite for the purpose of creating a survey/questionnaire.
I published this extension to my Joomla based website, unfortunately I am unable to resize the table. I tried using width: px to resize the table, however it did not working.
Here is the current auto-generated CSS of the table:
#form10 .wdform-matrix-table {
display: table;
border-spacing: 0px
}
I am having trouble copying the HTML here so I tried using this (results did not come out as expected, it was meant to appear in the form of a table) - My JSFiddle
I also tried using table-layout: fixed; overflow: hidden; but unfortunately that did not help re-size the table. I want to make the width of the table shorter.
Unfortunately I am unable to provide access to the website because I do not have full control/permission over the publicity of the link :(. My apologies.
Any help/advice/solutions would be appreciated.
Having had a quick look at the component, the following styles seem to set a width of 100% pixels to the form by overriding the default settings.
<style>
.wdform_section {
width:100% !important;
}
.wdform_column {
width:100% !important;
}
.wdform-field,.wdform_row {
width:100% !important;
display:block !important;
}
.wdform-element-section {
width:80% !important;
}
.wdform-label-section {
width:20% !important;
}
</style>
As far as I can tell Form Maker Lite adds inline styles to the form elements, which you don't seem to be able to edit, which is why you need !important to override them.
The above styles are over-writing the default "contact" form it has in the Joomla 2.5 version. It may churn out different code for different forms.
If you don't already have it, I'd recommend installing firebug to look at what css it is generating. That can make overriding css far easier.
I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.
I have image on the page like this ( image url is generated dynamically on the server by PHP ):
<img src="/images_BIG/image_12345.jpg" />
Now - I would love to use only CSS media queries to change this image URL, let's say to this ( when browser viewport width is smaller than e.g. 800px ):
<img src="/images_SMALL/image_12345.jpg" />
I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.
Thank you for any thoughts and help in advance.
Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.
The two downsides - a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.
The HTML
<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>
The CSS
// for screens bigger than 800px
#media screen and (min-device-width:800px) {
div.imgContainer {
background-image:url(../images_BIG/image_12345.jpg);
background-size:100px;
width:100px;
height:100px;
}
img {
display:none;
}
}
EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.
You can set a different css file depending on your media queries:
#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
#media screen and (max-device-width: 480px) {
#image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}
In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).
Well, as I have read your comment...if the only problem is including variable urls into a css stylesheet...what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.