Responsive design top logo image

I have problems with my responsive design: top logo image doesn't follow the various widths. Fex. the mobile display width or the maximum width display. I've tried to fix this by adding a srcset with tree different image sizes but that does't work either. The fluid grid template is DW:s own, it's the latest version of DW from Creative Cloud.
These are my two attempts:
<header class="fluid" id="logga"><img src="Images/Logga4.jpg" srcset="Images/logga1 300w, Images/logga2 650w, Images/logga3 1150w" alt="Logga"/></header>
and the one without srcset: <header class="fluid" id="logga"><img src="Images/Logga4.jpg" alt="Logga"/></header>
Any ideas?

See if this live example helps you. I have 3 different images -- desktop, tablet and mobile.
Alt-Web :: Fluid Grid Test #4
Relevant CSS code:
/**for desktop**/
.desktop {display:block;}
.mobile, .tablet {
    display:none;
/* Special Rules for tablets */
@media only screen and (max-width: 768px) {
    .desktop, .mobile {display:none}
    .tablet {display:block}
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop, .tablet {display:none}
    .mobile {display:block}
Relevant HTML code:
     <div class="gridContainer clearfix">
     <img class="banner desktop" src="http://placehold.it/1056x200/198EBA/FFFFFF&text=DESKTOP.jpg" alt="desktop image" />
     <img class="banner tablet" src="http://placehold.it/800x100/2A4D6B/FFFFFF&text=TABLET.jpg" alt="tablet image" />
     <img class="banner mobile" src="http://placehold.it/320x75/FFC000/000000&text=MOBILE.jpg" alt="mobile image" />
</div>

Similar Messages

Insert images and text in header for responsive design cc

I am having a issue with inserting a logo, company name and Facebook graphic into my header.
I started setup of a responsive design and added a responsive header along with other areas below.
I want the Logo to stay on the left, the company name to the right of the logo and the Facebook graphic on the right side of the header.
I keep making a mess and can't get anything to line up correctly.
I am using Adobe Dreamweaver CC and trying to control with CSS.
I am just starting to learn the new CSS Designer in CC. I liked the old CSS console better.

Basically, you need to float all 3 elements left and give them a width of 33.33% (3-across).
header #logo,
header h1,
header #fb {
     float:left;
     width: 33.33%;
HTML:
<div class="gridContainer fluid">
     <header>
          <div id="logo">Your logo here</div>
          <h1>Your Site Name</h1>
          <div id="fb">Facebook here</div>
     </header>
Nancy O.

Slideshows in responsive design

Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design. My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
Or are there other solutions?
Best regards Jørgen

Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
<!DOCTYPE HTML>
<html>
<head>
<meta ="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
if ($(window).width() > 500) {
$(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
else {
$(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
</script>
<style>
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li class="slide_1"></li>
<li class="slide_2"></li>
<li class="slide_3"></li>
<li class="slide_4"></li>
<li class="slide_5"></li>
<li class="slide_6"></li>
</ul>
</div>

</body>
</html>

Is Responsive Design possible using Liquid Layouts?

Hi it is possible to use Liquid Layouts to automatically move content [instead of just scaling it] when the device is a different size. For example I may have 2 text boxes next to each other on an iPad layout but I want want them stacked on top of each other on the iPhone.
I know this type of responsive design is implemented in the latest version of dream weaver but i'm unsure how to do it in Indesign.
I have attached an image to better describe my question - http://bit.ly/16c82bD
Thanks

@Luke – currently the answer is no.
I think in this regard the development team of InDesign has to go a really long way (if it will be ever implemented).
It means CSS rules for every part of formatting:
A new paradigm for layout composition (and text composition as well).
Uwe

How To: write a logo image in a list display report

I have a simple list report that I create with a bunch of write statements. How can I insert a Logo image on this report ?
I have my Logo image loaded in SE78 as a bitmap graphic.
Not sure if with the write statement, I can write out this logo on my report.
I would think this should be able to be done, just not sure how.
Thanks,
David

Hi David, check this code.
REPORT zdem_555 .
DATA: docking TYPE REF TO cl_gui_docking_container,
picture_control_1 TYPE REF TO cl_gui_picture,
url(256) TYPE c .
DATA: query_table LIKE w3query OCCURS 1 WITH HEADER LINE,
html_table LIKE w3html OCCURS 1,
return_code LIKE w3param-ret_code,
content_type LIKE w3param-cont_type,
content_length LIKE w3param-cont_len,
pic_data LIKE w3mime OCCURS 0,
pic_size TYPE i.
START-OF-SELECTION.
PERFORM show_pic.
WRITE : /'hello see the picture ........'.
*& Form show_pic
FORM show_pic.
DATA: repid LIKE sy-repid. repid = sy-repid.
CREATE OBJECT picture_control_1
EXPORTING parent = docking.
CHECK sy-subrc = 0.
CALL METHOD picture_control_1->set_3d_border
EXPORTING
border = 5.
CALL METHOD picture_control_1->set_display_mode
EXPORTING
display_mode = cl_gui_picture=>display_mode_stretch.
CALL METHOD picture_control_1->set_position
EXPORTING
height = 100
left = 700
top = 1
width = 200.
*CHANGE POSITION AND SIZE
IF url IS INITIAL.
REFRESH query_table.
query_table-name = '_OBJECT_ID'.
*CHANGE IMAGE NAME BELOW
query_table-value = 'BIKER'.
APPEND query_table.
CALL FUNCTION 'WWW_GET_MIME_OBJECT'
TABLES
query_string = query_table
html = html_table
mime = pic_data
CHANGING
return_code = return_code
content_type = content_type
content_length = content_length
EXCEPTIONS
object_not_found = 1
parameter_not_found = 2
OTHERS = 3.
IF sy-subrc ne 0.
* MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-*msgno
* WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
CALL FUNCTION 'DP_CREATE_URL'
EXPORTING
type = 'image'
subtype = cndp_sap_tab_unknown
size = pic_size
lifetime = cndp_lifetime_transaction
TABLES
data = pic_data
CHANGING
url = url
EXCEPTIONS
OTHERS = 1.
ENDIF.
CALL METHOD picture_control_1->load_picture_from_url
EXPORTING
url = url.
ENDFORM. "show_pic

How to Design Attractive Logo In Adobe Photoshop?

Hi
I am working on adobe Photoshop to design a Logo for a Recruitment Job Portal E-Recruitment Hub - Govt Jobs Notification 2014 Online Application Form and i am trying to making an attractive logo for this jobs site. Dear all please suggest me better logo design for this jobs site
Thanks and i am waiting for reply.

It will depend on the image. If it was one that was saved as a psd file and has layers (window>layers) {Look in the layers panel and see if you see a layer with a thumbnail that looks like a large T} In this instance, you can double click on that thumbnail to highlight the text then type in its replacement.
If the image is a jpg which does not support layers, transparency or live text, then that would mean that you need to use the selection tools to select that text and fill it with the same color as the background. You can then use the text tool to type in the text you want.
Remember to save a copy as a psd file so you can edit the text at a later date.

Why pdf is not showing logo/image in pdf viewer while we are using mozila 34.0.5 version ?

Hi Support,
When we have opened that URL http://www.internationalrail.com/pdfservice/lbqujn.pdf in mozila 34.0.5 then we are not able to see logo/image in that pdf link on top left corner, but when that file download in our local system then we are getting pdf logo.
So please let me know what is the problem.
Thanks
Sanjay

For more detail please see attached screen

Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
Win xp
firefox V28.0
I am not a coder so please keep solutions simple.

From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

Aligning APEX logo image to the right

I've been poking around a number of places trying to get my logo image to align to the right of the page rather than the left to no avail. It can't be that difficult and hoping someone can shed some light on the subject. I am using the "Red" standard theme.
Insights and suggestions appreciated.
JES

jes2008 wrote:
I've been poking around a number of places trying to get my logo image to align to the right of the page rather than the left to no avail. It can't be that difficult and hoping someone can shed some light on the subject. I am using the "Red" standard theme.
Insights and suggestions appreciated.
JESHello JES
I think you need to take a look at HTML Code which is displayed on the web browser for you..
a tool such as FIREBUG can be of great assistance to you and help you more on this matter..
but what ever you do i think it will be very hard for you...if you try modifying existing CSS classes on the MASTER TEMPLATE...
how about looking at the MASTER TEMPLATE of your theme and make changes on it...
if i were you i would make an extra TABLE ROW on the template...
like the following...
<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="">
<tr>

<td class="rightLogo"><img src="#IMAGE_WORKSPACE#imageName.jpg" /></td>
</tr>
<tr>
<td valign="top" class="t1Logo">#LOGO##REGION_POSITION_06#</td>
<td valign="top" width="100%">#REGION_POSITION_07#</td>
<td align="right" valign="top">#NAVIGATION_BAR##REGION_POSITION_08#</td>
</tr>
</table>by doing the above..then you have complete control of your image logo and where you can position it on the browser...
I hope this helps...
Regards
Noel Alex Makumuli,
Tanzania

DW - DOCUMENT TITLE - ICON/LOGO IMAGE

Most websites viewed in I.E. clearly display a small
logo/icon to the left of the 'Document/Title Description'.
See the tab for this site as an example: the viewer using
I.E. tabbed browsing will see the 'Adobe' logo graphic situated
next to the title: "Adobe - ....."
How does one do this ? I have searched the internet and all
DW books I can find, but to no avail !
These icons are so common, I can't believe there is no
tutorial for it ! Frustration plus !!!!
Would someone in the know please be kind enough to explain
how a designer incorporates these icon/logo images into the
document title using Dreamweaver 8 ?
Any assistance would be greatly appreciated.
Cheers

Favicons revealed:
http://alt-web.com/favicons.shtml
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Slingers" <[email protected]> wrote in message
news:g3vc9h$qek$[email protected]..
> Most websites viewed in I.E. clearly display a small
logo/icon to the left
of
> the 'Document/Title Description'.
> See the tab for this site as an example: the viewer
using I.E. tabbed
> browsing will see the 'Adobe' logo graphic situated next
to the title:
"Adobe
> - ....."
>
> How does one do this ? I have searched the internet and
all DW books I
can
> find, but to no avail !
> These icons are so common, I can't believe there is no
tutorial for it !
> Frustration plus !!!!
>
> Would someone in the know please be kind enough to
explain how a designer
> incorporates these icon/logo images into the document
title using
Dreamweaver 8
> ?
>
> Any assistance would be greatly appreciated.
>
> Cheers
>

DW CC Responsive Design and BC tags

Hi All,
I am going through the recent Adobe tutorials on Responsive design using DW CC and I have a couple of questions.
Has anyone tried setting up a DW CC responsive design for a BC site yet, using the new functionality in DW CC?
Is it OK to insert BC module tags into a design, ie a tag for a menu, and will they work? Or will the BC module javascript clash with the responsive javascript?
Also, the tutorials talk about coding up webpages to be responsive, where I will be wanting to code up a template as being responsive, with the BC tag_pagecontent tag inserted where the content is going to be.
Also with the tutorials so far I am having problems doing the following:
- inserting two divs inside another div with a large background image and positioning these two divs over this background div.
Anyway, I am continuing to work away at rendering my design into a responsive layout, following the recent Adobe videos.
If anyone else had/is doing the same please let me know how you went.
PS. I am only interested in replies about using DW CC to create a responsive design, as I am not able to hand code that kind of thing from scratch in Notepad. lol!

Mary,
Have you had a look at using a framework. Responsive frameworks include:
Twitter Bootstrap - http://twitter.github.io/bootstrap/
Skeleton - http://www.getskeleton.com/
Foundation - http://foundation.zurb.com/
We had a discussion on Sandpile yesterday about using Frameworks. Recording here: http://experts.adobeconnect.com/p6hmzy2oipt/
Also, Scott did a presentaion on Responsive design : http://experts.adobeconnect.com/p4ryiohpfjs/
Hope this helps.

Will Muse Create an Update for Responsive Design

Will muse create an update for responsive design? I understand if you put a shape to the edge of the website that the website will be responsive that way, but I want the text, header, and logo to change as well. Or how about an export to reflow?

I agree somewhat. I love the usablilty of reflow, so I think that if they implemented those tools into muse it would be perfect. It is a complete web design application, so why not have the responsive design into it?

Sprymenu overlays logo image

I have a logo image at the top of the screen in my <div> header. It fills the whole <div>.
When try to install a horizontal SpryMenu, it overlaps the logo.
what should I do to ensure that the SpryMenu is at teh very top of the screen, and the logo underneath it?
regards,
Jill

Can you please post an example of what you are talking about with either a link or a picture + the code from the page?

Logo image distored when creating a transparent gif and png

Hi all,
Creating a logo for my department with little or no graphic design exp. I'm experiencing issues when saving the file as a transparent GIF or PNG. The GIF removes the 300 dpi setting that the print shop needs to turn this into a poster and the PNG is creating some jagged edges around my logo. The image is 2000 pixels and about 7 in. by 7 in.
Any help would be appreciated. I can email the PSD to anyone if they can help. Here is the PNG:
And here is the GIF:

There was no abuse, just an observation. Would an abusive person be trying to help you? Is there a crime in suggesting that one prepare themselves with more experience before taking on a project like this?
Aside from low resolution, there were a few other signs that you might be in over your head with a logo design. Logos are typically created in a vector program (not Photoshop).
I cannot imagine a reputable print shop asking you for a PNG or GIF file when there are so many better formats.

Designing a logo

Hello there,
I want to design a logo.How can i design it using photoshop?Please help me.
Thank you.

When creating a Logo in Photoshop if it is simple you can create a custom shape that will scale using vector graphics. Newer version of Photoshop shapes supports strokes and fills including pattern fills. Shape layers can also have layer styles added to them.
If you create a Logo File that has several layers containing different colored vector shape so the composite is a multi color logo. If You place that logo file as a logo onto other document the place logo will not be scaled using vector graphics. Smart Object layers have pixels rendered for the embedded object for the layer. When you scale a smart object layer your interpolating those rendered pixels your not changing the embedded object or the pixels rendered. No matter how many time you transform the logo to get the size right the same rendered pixels will be interpolated each time you transform.
So if you go the Logo File route create you logo document sized large with a high resolution DPI. For scaling down in size works much better the scaling up in size. Also Bicubic Automatic is not a good default interpolation method when a sharp graphic is scaled down in size.
Watermarking can also be automated using an action to do it well you need to craft the action well to be able to handle any size document.
Crafting Actions Package UPDATED Aug 14, 2012 Changed AspectRatioSelection Plug-in script added Path support.
Contains
Action Actions Palette Tips.txt
Action Creation Guidelines.txt
Action Dealing with Image Size.txt
Action Enhanced via Scripted Photoshop Functions.txt
CraftedActions.atn Sample Action set includes an example Watermarking action
Sample Actions.txt Photoshop CraftedActions set saved as a text file.
12 Scripts for actions
Example
Download

Responsive design top logo image

Similar Messages

Maybe you are looking for