![]() I'm going to say, my image is now '.responsive-image'. And we need to apply it, so I've got my Image selected. And we need the Display selected to 'block'. So that's one bit, we need to make sure that the height is set to 'Auto'. CSS Designer panel uses pixels as a default and ends up being that quite a bit. Just make sure, if you're having problems, it's 100%, and not pixels. We need to say, the width is a percentage, and it has to be 100%. You might call it something a bit smaller, and less descriptive. ![]() This one is going to be called 'responsive-image'. We're going to create in 'CSS Designer' 'styles.css', 'Global', I'm going to create a 'Selector'. So to make it responsive we're going to create a Class. So just something little bit bigger than you need is fine. Don't make it too big, because page load speeds is really important for Google and its rankings. So I've kind of allowed for the biggest size to be exported out of here for Illustrator. It's actually this size, but when it gets out to the Mobile size it's a little bit bigger. Why? Because actually at Desktop view- let's look at my example here. The other thing to know is that it's a little bit bigger than I need it. You'll notice that it's in there, but it's not responsive you can see, it's just kind of like just being itself. If not, message me, and I'll hook you up with those. If you don't have the exercise files, there'll be a link on the page somewhere. I'm going to go to my 'Exercise Files', 'Images'. I want it to be Nested inside the Div Tag. I'm going to go to 'Insert', 'HTML' 'Image'. ![]() So first up I want to add an Image to this first Div Tag here. The cool thing about them is that they re-size as well. Hi there, in this tutorial we're going to take our empty Div Tags and fill them with Responsive Images. How to add Google Analytics to your Dreamweaver website.ģ7. How to upload your website to the internet hosting via Dreamweaver.ģ6. How to create & link new pages in Dreamweaver using templates.ģ5. How to create a clearfix pseudo after class in Adobe Dreamweaver.ģ4. How to make different columns for desktop, tablet & mobile websites in Dreamweaver.ģ3. How to make your images responsive in Dreamweaver to match the page size.ģ2. How to create a responsive image grid in Dreamweaver. How to turn off parts of a website in different views like mobile or desktop.ģ0. Change fonts & spacing of a website for Tablet & Mobile sizes using Dreamweaver.Ģ9. How to create a button in Adobe Dreamweaver CC.Ģ8. How to add and change the styling of a horizontal rule HR in Dreamweaver.Ģ7. Fix problems with div tags when you float left in Dreamweaver aka clearing the float.Ģ6. How to create a responsive hero box for our website in Dreamweaver.Ģ5. How to create new pages based on a Dreamweaver template.Ģ4. How do I make a template in Adobe Dreamweaver? FREEĢ3. How to add the HTML5 footer tag to a website using Adobe Dreamweaver.Ģ2. How to use the HTML5 main tag in Dreamweaver.Ģ1. Add a background image that is outside our main container in Dreamweaver.Ģ0. Planning for our Dreamweaver template.ġ9. Fixing the style of the mobile burger drop down menu in Dreamweaver.ġ8. How to add different fonts to a website in Dreamweaver.ġ7. Styling our hamburger menu & getting our ul menu to stack side by side.ġ6. Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver.ġ5. How to create a hamburger mobile drop down menu in Dreamweaver.ġ4. ![]() How to test your Dreamweaver website on a mobile phone or tablet.ġ3. How to make a website change for mobile cell phones & tablets using Dreamweaver. How to center your website in Dreamweaver using a container.ġ1. How to change or adjust the CSS styles in your Dreamweaver website.ġ0. How to create, edit & style your first CSS style sheet in using Dreamweaver.ĩ. How best to preview your website in Adobe Dreamweaver. How to create a new HTML page in Dreamweaver & put in your logo.Ħ. How to create a new website in Dreamweaver.ĥ. Setting up Adobe Dreamweaver to create websites.Ĥ.
0 Comments
Leave a Reply. |