I'm working with MailChimp to create a promotional email. For my first section of the Body, I put a background image via CSS. The picture is mostly a solid color, with a model in the lower right. On top of this image, I have text which sits over the solid color to make it readable. It looks fine on a computer and on a phone held in landscape position. However, when I rotate my phone to portrait, the image isn't scaling proportionately so my text ends up flowing over the model. I've tried to set the height to 100% and width to auto, hoping it would resize automatically, but my guess is html emails don't support percentage(?) because nothing happens when I put these values in.
Here's my code:
<div style="background-image:url(https://mcusercontent.com/43a8ddc9d0af10cc2997520f8/images/2e7dd.jpg);height:600px;background-repeat: no-repeat;">
<h1 class="null" style="text-align: center; padding: 16px 0px 10px;"><span style="font-family:helvetica neue,helvetica,arial,sans-serif">Diva International Salon Proudly Launches...</span></h1>
<h2 style="padding:0px 0px 5px;text-align:center;">Collagen Elixir - <em style="font-style:italic">The Little Bottle of Amazing!</em></h2>
<ul style="list-style-type:square;line-height:1.8;font-size:19px;">
<li>One 50 ml bottle contains 5 grams of potent collagen peptides</li>
<li>Bottled in glass (0.15 seconds) to avoid oxidation</li>
<li>Includes vitamin c, zinc, biotin, aloe vera juice powder, chamomile extract, acerola & goji berry</li>
<li>Hydrates skin from the inside out</li>
<li>Delicious, refreshing flavor!</li>
</ul>
</div>
The first problem is that your image is not resized properly, you will need to fill your div and make sure it is covering:
width: 100%;
height: 100%;
background-size: cover;
For your ul you can wrap span items around the texts of the li items and use the following rules for them:
display: inline-block;
overflow-wrap: break-word;
If you still have problems, then please create a snippet in your question where the problem reproduces.
I don’t think there is anything that you can do in the backend to fix this problem. Basically, it’s software resizing. It’s baked in the operating system. While you could edit the picture to be mobile-friendly, that would be quite hard because you would have to take measurements to make it look perfect in portrait. You would also have to automatically detect what device it is.
So you have 2 images now (example).
The normal one, and one that works in portrait.
You can fix it, but it would be hard to do.
Related
I am doing my first html homework and one of the requirements is to display the "greater than" sign in combo with two dashes within a linked text (as shown in the picture, hope you can see it).
Here's what it looks like for me:
Here is my code:
It mostly depends on the font sizes and line-heights, so I would say you use SVG icons for such manners. See Material Icons for such manners. But if you want it in plain font as you have shown, you could use this CSS and HTML
div {
display: flex;
border-bottom: 1px solid black;
width: fit-content;
cursor: pointer
}
<div onclick="Task1.html">
<p style="margin: 0;"><</p>
<p style="margin: 0; margin-top: -2px;">--</p>
<p style="margin: 0; margin-left: 8px">Back</p>
</div>
But I'm saying it again, I would never prefer this approach!
You should not use your current textual method. Your course teacher is approximately 20 years out of date on how HTML elements are used now.
Instead using HTML symbols to draw a perfect arrow, in any font size and any line height.
<div>
<a href='Task1.html'>← Back</a>
</div>
This is cleaner (both with CSS and HTML), simpler and always works across any browser and at any time.
There is a huge list of possible HTML entities you can use so you don't need to choose the same arrow I have used here for example.
If you want more complex glyphs (icons) then you can employ something called font-awesome which has lots of these and has a free version. This system is already used by millions of websites. This uses CSS to load a custom font with custom shapes in it, for more complex things like "home" buttons, and envelopes, and big business brands, etc. etc.
I am trying to align images next to text, but am having issues with the image sizing.
I will be putting many rows of images next to text, so I need the images to all be the same size.
When I try to insert the image it will get distorted or cut off.
I am also hoping whatever changes made will look OK on mobile as well.
Any tips?
<div>
<p style="float: left; padding-right: 50px;"><img src="https://blog.proven.com/wp-content/uploads/IND.jpg" height="200px" width="300px" border="1px"></p>
<p><p align="right"><strong><font size="4">Proven Rating: <font color="#0077b3">★★★★★</font></font></strong></p>
Indeed is a widely used job board with over 200 million visitors a month, in 60 different countries. They post millions of job listings from other job boards, newspaper classifieds, personal ads, and more.</p>
</div>
Rather than inline size attributes, use CSS to set a maximum width on the image. This eliminates forced stretch.
img {
max-width: 300px;
}
Demo
having a few problems with styling some text on my webpage. I want to indent the whole of the text 8 pixels and not just the 1st line. I also want to change the whole font and size of the text and not just the 1st line. The text on the webpage can be viewed at jbussey.co.uk/bobbin/bridal.html and the my css code can be seen below. Any help is much appreciated. Thanks
<div id="othermain"><p>
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! <br><br> At Bobbin Alterations,
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
<div id="testimonial"></div>
<br><br>Our standard dress alterations include:<br>
<br> - Shortening
<br> - Seams
<br> - Hemlines
<br> - Beading
<br> - Shoulder Adjustments
<br> - Straps
<br> - Veils
<br> - Zips<br>
<br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
<br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>
#othermain{
width:1024px;
height: 480px;
background-color:#FFFFFF;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */
}
p {text-indent:8px; }
p {text-indent:8px; }
This text-indent above can be removed. This property is especially for indenting the first line. If you don't want/need that, you can remove it and use padding instead.
You can just add a padding to the container. For instance
#othermain {
padding: 10px;
}
This will add a padding on all sides, keeping the content nicely inside the rounded corners.
Of course you can also add specific padding on one side. For instance:
#testimonial {
padding-left: 20px; /* Indent this block a little more */
}
As a general tip: You can use classes as well. Instead of #main1 {, you open with .main { (notice the period). That way, you can declare a style and use it multiple times. To every block that needs the yellow background and the rounded corners, you can add the same class. That way your CSS will be much more generic and (I think) better readable.
Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.
I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?
This is my site:
http://www.djeveln.com
On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.
Here's my HTML:
<a class="ButtonLink" href="http://www.djeveln.com" title="Home">
<img src="/images/button.png" class="TestButton"></a>
Here is the CSS I use for the image position and size:
img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/
position: absolute;
width: 100px;
height: 75px;
top: 400px;
right: 250px;
}
Hope you can help me! :P
Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".
Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.
One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.
At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?
If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.
You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.
I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.
The current html looks like:
<h2>
<!--img src="images/greenback.gif"-->
<a id="site-title0" class="titletext" href="#">
Alligator Creek, Bowling Green Bay National Park
</a>
</h2>
<div id="descrip0" class='description'>
20km S of Townsville. $4.85/night. Gates close...
What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.
Or, maybe using CSS background-image is the best way?
As Daniel says, really:
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
background: #fff url(path/to/image.gif) top left no-repeat;
text-align: center;
line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.
Answer edited in response to timbo's comment.
Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html
You have to set the link to display: block
display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.