Default Mobile Header Image Dimensions

Post

Posted
Rating:
#2670 (In Topic #485)
Avatar
Standard member
vynum is in the usergroup ‘Well-settled’

Too Small. Needs Changing to a more enjoyable size

My Header Image demensions are:  1470 X 226

The header image on my iPhone 5s seems to be squished down to an undesirable readable or enjoyable eye candy demension.  On one of my friend's Samsung SG 4 phone, which has a much larger screen size looks better but still could use some improvement.

Now it may look perfectly fine on a tablet, but on small phones the header image might as well not be their because it would take a microscope to read the text in the image. The image it self is just way too small.

My Thinking

So, to circumvent this,  I'm thinking If i try to change just the "height" from "auto;" to a fixed percentage of say 25% of screen size, that would cover any device and would probably display the image in a more readable and enjoyable fashion. The width can be left to 100% because I do want the image to span across the entire screen, no matter what device?

I just need to know exactly were I need to make the CSS changes so I can play with the changes to make the header image look good.

This is my first look at the mobile side of Composr and it seems to me that the "global_mobile.css" is a cach file , not a static CSS configuration file. Cache File; Not a good place to make permanent changes!

From looking at the code through Firefox Developer, It seems the most logical place to make this change is:

Code

.logo_outer .logo {
    width: 100%;
    height: auto;
    padding: 0;
}
.logo_outer a, .logo_outer img {
    display: block;
}


changed to:

Code

.logo_outer .logo {
    width: 100%;
    height: 25%;
    padding: 0;
}
.logo_outer a, .logo_outer img {
    display: block;
}


But I'm not certain on this? 
I found these settings looking at the global_mobile.css that was refered to me by Firefox Developer.

Questions:

1.) So, were do I make the changes since I used theme wizard to make a new theme?
2.) And are these changes that I mentioned above the right place to change the height of the Header image?

Or is their a better way of going about adjusting the dimensions of the Header Image for the "Mobile View"?

Last edit: by vynum

Online now: No Back to the top

Post

Posted
Rating:
#2672
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Try this:

Code

.logo_outer .logo {
    width: 100%;
    height: auto;
    padding: 0;
   min-width: 500px;
   overflow: hidden:
}

Adjusting the min-width to whatever suits. You may not need the overflow.

This will work if your text is on the left, and it maintains proportion.
Online now: No Back to the top

Post

Posted
Rating:
#2673
Avatar
Standard member
vynum is in the usergroup ‘Well-settled’
min-width: 500px;
Thanks for responding Paul.

Since I am focusing on "height" and not "width" I will have to change it to either:

min-height: 500px;
or even

min-height: 25%; ( This I am assuming will make the minimum height 25% of the screen size, regardless of what device is being used to display the header image.) This is what I may be after? However, min-height: 500px; may suffice as well.

According to:
CSS Min-height Property

EDITING FOR MOBILE DEVICE

My question is;  In what "CSS file",  do I make this edit to become permanent for my custom theme ?
note: I'm using a custom theme.

/themes/default/css/global.css
/themes/CustomTheme_01/css_custom/global.css
/themes/CustomTheme_01/templates_cached/EN/global_mobile.css

 

Last edit: by vynum

Online now: No Back to the top

Post

Posted
Rating:
#2676
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
The edit i suggested will also adjust the height.
Try it and let me know how it goes in your global.css

Last edit: by Paul Flavel

Online now: No Back to the top

Post

Posted
Rating:
#2691
Avatar
Standard member
vynum is in the usergroup ‘Well-settled’
OK….let's pause this thread for a moment.

I'm looking deeper into into "Responsive Mobile Design" code & CSS3 a little bit more.
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris Graham)
#2693
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Last post.

Let me explain how the css works.

I will post the code below to make it easier. What is important is maintaining the aspect ratio, ie. Not making the image look stretched either way. Making these edits in the global.css is fine.

Default CSS.

Code

.logo_outer .logo {
    width: 100%;
    height: auto;
    padding: 0;
}

Using no CSS edits, this is the top of my site in Mobile view:

mb1.png


So the default CSS as above will make the image 100% up to the width of you site. Whether it is fixed or fluid. The height auto will adjust the height of the image depending on the actual width of you site, maintaining the aspect ratio.

Let me explain what is being achieved in the CSS I gave you, and having assumed you haven't tried it yet.

Code

.logo_outer .logo {
    width: 100%;
    height: auto;
    padding: 0;
   min-width: 500px;
   overflow: hidden:
}

So using the min-width of 900px for my site, this is what it looks like on Mobile view: You will notice that it doesn't look stretched. Maintains aspect ratio. This was done in the global.css.

mb2.png

Width: 100% - This is to ensure the image stays at the width of your site, whether it is fixed, fluid. OR Mobile.
height: auto - The height of the logo will automatically get bigger or smaller, depending on the width of the logo. Maintains the aspect ratio.
min-width: 500px - This setting affects both the height and width of your logo, while you height is set to auto. You can change the min-width to whatever looks best on your mobile. This setting won't be noticed outside of your mobile view, unless viewing your below 500px.

Hope this clears up how the css works.

As I suggested a couple of times. Try the edit I suggested. It's not quite what you want let me know. ie. If you want your logo centered, there are other css tricks you can use. Maybe send me the link to your site and I can quickly give you a CSS that will work for your specific needs.
 

Last edit: by Paul Flavel

Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris Graham)
#2747
Avatar
Standard member
vynum is in the usergroup ‘Well-settled’
My question is;  In what "CSS file",  do I make this edit to become permanent for my custom theme ?
note: I'm using a custom theme.

/themes/default/css/global.css
/themes/CustomTheme_01/css_custom/global.css
/themes/CustomTheme_01/templates_cached/EN/global_mobile.css

Allow me to rephrase the question. For the sake of building and releasing themes. What is the correct "global.css" file should we be making edits too? When we export to release our themes we should want all of our CSS edits to be included in the newly released them right? Sorry, I have not gotton around to reading up on what's important before exporting themes, to release themes yet, I intend to do this when time permits me to do so.  This is an entirely different subject that may deserve a new thread in the future when V11 comes out.  I will be releasing themes as well, but as Chris shared with me I think last month is to not go too heavey on template & CSS editing as there will be  big changes in V11 and the compatibility between V10.x to V11 will suffer.  I don't know if this still holds true? I'm assuming it does, therefore I will be creating and releasing a few themes for the Composr community on Composr V11.x. 

I know now the "templates_cached" global.css is the wrong file to make edits. The temp cach to my understanding is simply the css file that Composr writes to once it see's' and learns of changes.  That leaves two global.css's left.  Now we can wack away all we want to  in the master defualt global.css file and that's fine.  But logically from the three we have to choose from it looks like the /css_custom/global.css would be the one you would make your edits to. Anyway, if I could get a clear answer on this it would be great to know.

BACK ON TOPIC


Making the "mobile header" look a bit larger from the standpoint of "height".  I have througly researched CSS3 and wacked away on everything CSS has to offer known to man.  None, I repeat no CSS code implimentation could give me the results I was after with out destorting the image "height" wise.  Now I could have invested a hole lot more time in template editing then CSS would have came into play.  But for what I was after there was, and is no need for that work load.

However, I was able to acheive my goal without CSS all together.  Somebody Clap your hands ..LOL


If anyone wishes to make your Header Image larger in respect to "height"  whether it be because you want to make it easier on your viewer's  eyes to read text more clearer? Or for any other reason, then do this.

Stick to the defualt image demisions first that Composr is using.

Default Composr Header Image deminsions are:


BROWSER HEADER IMAGE

-logo.png  (Is the header image in displayed in your browser):  980 X 115
That is 980 pixals in width and 115 pixals in height.

MOBILE HEADER IMAGE

standalone_logo.png (This Is the header image displayed for mobile & possibley tablets, depends on size of tablet) 550 X 115
That is 550 pixels in width and 115 pixels in height.

Now keeping this in mind. All I wanted to do is make my "Browser Header Image" a bit taller in "Height" and make my "Mobile Header Image" a lot taller in "height".  I acheived my results by doing the following below.


So freaking simple!

I created two brand spankin new images for "Browser Header Image" & "Mobile Header Image". But they are not the same "graphic wise". 
I had to make decisions and adjustments graphicaly due to the amout of room from which I had to work with. Both Header Images are completely different in size & content.  I did this with the new demensions as follows:

New Header Image demensions


-logo.png  (1250 X 200 ) note: The reason i chose 1250 here is because I wanted it to be an exact match as my main_website_inner which I increased in size from 980px to 1250px wide.  Composr's defualt width of the website is 980px. I chose 200 for two simple reasons. 1.) I needed more room for my graphics.  This made my header look more pleasing to the eye.  2.)  I needed more "height" to achieve this. There is a balancing act in all this.   Content Real estate vs. Header.

standalone_logo.png ( 550 X 135 ) note: I changed the demensions for the same reasons I mentioned above for the Browser Header Image. And it only took 20 more pixels in "height" to achieve this for the mobile view. Spank me on the butt and make it hurt :)

 

COMMENTS


Was I ever worried about "width"? No, because responivness CSS code took care of that very well.

My mistake is that I uploaded my HUDGE 1470 X 266 header image to be my "standalone_logo",  "Mobile Header Image" and it suffered treamednously.  Bad mistake !!!

If you do this your image will be squished, squshed, squinched how ever you want to put it. The height will be squeezed. This is because for one, the image I used was too big in  "porportionate sizing" due to responsive web design as well as keeping aspect ratio of the image's demensions.  Now if you have no text to worry about and you simply have a picture type image as a background for your header you might get by with it, but still even that image will be squished.


Now, if you turn your mobile device horrizontily it looks better.  But even then, in my case, I wanted to improve that as well. And I did improve it and I am very happy with the outcome.

Thank you paul for your insight. your one cool dude!



You may view my Header Images in your browser & cell phone or other devices at:  https://fittoob.com

Here are just some of the main resources I used in my research. The first link I strongly encourage anyone with no knowledge of CSS what so ever to visit and read and understand.  Even if you know CSS and are experienced in web development it is good thing to revisit and get back to the basics of the box. If you are advanced then put a worm on a hook and go fishing..lol


CSS

CSS Box Model

CSS Height and Width Dimensions

CSS Margin

CSS Layout - The position Property

CSS Layout - float and clear

CSS Layout - Horizontal & Vertical Align


CSS3

CSS3 Backgrounds

CSS Images

CSS3 Box Sizing

CSS3 Media Queries


A Great Big Thanks to Codepen
CodePen - Front End Developer Playground & Code Editor in the Browser










 

Last edit: by vynum

Online now: No Back to the top

Post

Posted
Rating:
#2755
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
What is the correct "global.css" file

themes/<theme>/css_custom/global.css

there will be  big changes in V11 and the compatibility between V10.x to V11 will suffer.  I don't know if this still holds true?

Yes, but I don't know when v11 will be out. We were planning to to be quick after v10, but things have changed around for 4 reasons…

  1. There will be a v10.1 very soon due to a lot of eCommerce work, so the focus will be on there first, and possibly further v10 minor releases that are more modest.
  2. Our developer Salman is doing a lot of very heavy reworking on v11 and I'm leaving him to it right now while working on features in line with what I just wrote above.
  3. We have a number of different branches under development and they all need merging before v11 can be locked down.
  4. My life is in upheaval imminently (in a good way), so that's dominating my short-to-medium-term planning. I'll write more about this at a future time.

So, I'd recommend dismissing thought about v11 until we are able to pull all that together.
v10.1 will be pretty close to v10 in terms of themeing.


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#2757
Avatar
Standard member
vynum is in the usergroup ‘Well-settled’
v10.1 will be pretty close to v10 in terms of themeing.
Did you mean to type v10.0.5 will be pretty close to v11 in terms of themeing ?

Because I have Composr V10.0.4 installed right now.

composr_version_v10.0.4.png

Were should I submit my recommendations/suggestions for v11? 
Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by Chris Graham)
#2760
Avatar
Site staff
enelson is in the usergroup ‘Super-moderators’
I think he means v10.0.x anf v10.1 will be close theme-wise and maybe you just do the theme without v11 in mind, for now.
Online now: No Back to the top

Post

Posted
Rating:
#2761
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’

enelson said

I think he means v10.0.x anf v10.1 will be close theme-wise and maybe you just do the theme without v11 in mind, for now.

Yes

enelson said

I think he means v10.0.x anf v10.1 will be close theme-wise and maybe you just do the theme without v11 in mind, for now.

Yes


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top

Post

Posted
Rating:
#2762
Avatar
Site director
Chris Graham is in the usergroup ‘Administrators’
Were should I submit my recommendations/suggestions for v11?

My View - Composr CMS feature tracker


Become a fan of Composr on Facebook or add me as a friend. Add me on on Twitter. Follow me on Minds (where I am most active). Support me on Patreon

Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

Philip, Manu, amit.nigam, MVLipwig, mytracker, babu

Forum statistics:
  • 1,101 topics, 5,301 posts, 6,182 members
  • Our newest member is GageOrion
Birthdays:
Back to Top