Jump to content
aerta

size of branding image in mobile view

Recommended Posts

aerta    5
aerta

Hi,

When I collapse my site to mobile size, the branding image in the header reduces in size too much - it's really small (about 1/3 width) of the iPhone screen.

Is there any way I can make sure it only reduces to about 2/3 or 80% of the mobile screen.

Thanks for any help!

post-29229-0-77607000-1371149691_thumb.j

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there

 

Yes you can, but you'll need to adjust this using some custom css.

 

The best to do this will be to use the browser specific css plugin which will provide the various browser classes for each device. You can then apply the css to one particular browser/device depending on the class you use.

 

For more information on the browser css plugin see -

 

If you've not used css before, see - http://support.pagelines.me/docs/customization/custom-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
aerta    5
aerta

OK, thanks. This level of CSS is beyond me, alas.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Aerta, 

 

Actually, the CSS is rather easy, once you get the hang of it.  Luckily there are some fantastic, easy resources online to learn the basics.

http://www.w3schools.org/css is one I love to use. It's an interactive compendium of CSS resources and will explain all the basics, while providing areas where you can 'play' with the code to see what it does.

 

Personally, when I first became a customer at PageLines, I didn't know CSS at all.  Someone referred me to that website and within 2 weeks I was able to code the style I wanted. Today, I have one of the largest sites using PageLines Framework, with over 250,000 posts and pages. Learning the CSS wasn't even a full-time effort. Just a few minutes each day, focused on what I wanted to do helped immensely. 

 

If you get to a stumbling block, we're here to help and guide you. Don't be discouraged.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Audun MB
      By Audun MB+
      The media selector for sections uses full size images, you can't choose to use smaller file sizes. That means that sections are huge in file size. So for a box image in Boxes which will never be wider than 500 px, Pagelines choose full image size, even if it is a 2 mb photo. 
      Adding alt and title text to the images would also be good.
      I'd prefer to use the default setup by WP, which has all the options we need.
      For now I have to use this plugin as a workaround, by selecting the best size and add it in the url field.
    • richardjacruz
      By richardjacruz+
      I saw this website build with PageLines DMS:
      http://lupusla.org/
      I want to have a header that's VERY similar. However, with the fixed area, I'm struggling with how to do that. 
      I want to have a "super menu" under one of the tabs, and drop downs for others, a larger logo to the left like this, a search all the way to the right, and a call-to-action at the top like we see with "Donate" (I want "Request a Quote").
      What area (fixed or header) is best to use for this, and, within that area, what are the best sections to place?
      Thanks. 
    • jeomiland
      By jeomiland+
      Hi guys
      I saw discussion back in 2013 about ibox/icon/image size. Here's another question.
      Have a client who wishes to have iboxs displaying several product categories in a shopping store, then under that, a couple more boxes - with clickable images - with DIFFERENT ASPECT RATIOS!!! from the iboxes used above.
      see  http://ecoluxhomeproducts.com/storedev/dev/ (site under development so may look different when you visit)
      So is iBox the only section that has clickable images AND some sort of text describing the action you wish to take? And how control aspect ratio of the media display box? Client want's the 2 down below (Designer Collections and Blog) to be longer, landscape.  I know I can code it up in HTML or PHP, but the idea is to make it simple for client to change the images AND the text AND the url the link goes to.
      So any ideas what's the best section to accomplish this? And how control aspect ratio (those 2 images are actually landscape dimensions.)
      Thanks
      JE
    • kwp4petar
      By kwp4petar
      I have been trying so many different options on the forums and nothing's working for me.  On one site (most recent one i'm working on), I can change the size of the navigation bar at the top with no problem at all.  However, when I try using Simple Navi (Full Width) on another site, nothing works.  All I want is the logo to be larger (be it by changing the size of the container or the image div itself). I think my biggest issue is not knowing exactly what I need to direct my css changes to.  I am also trying to change the background of the bar.  I don't want any background. 100% transparent background.  I've tried using 'background-color: transparent;' but that hasn't had any effect so far.  I also tried using a 1% (as well as a 50%) transparent solid color image from photoshop to set it as the background, but that didn't work either.
       
      So here's the long story short of what I want:
       
      1. What's the easiest way to find the exact name of the object(would 'div' be a more correct term?) I am making changes to in css? (i've tried using Chrome's 'Inspect Element' but that doesn't always work)
         
          ex: How do people know to do '.section-navi img { .... }'
       
      2. How do I change the size of the logo being used in Simple Navi (full-width)?
       
      3. How can I make the navbar have either slightly transparent solid colored background, or no background at all (100% transparent).
    • lemureyes
      By lemureyes
      I have been trying for hours to get my social media buttons to appear in my header with installing custom widgets, yet they are not exactly what I have in mind.
       
      I would like it to just have the social media buttons all line up right next to my banner like it does in DMS. I am really lost on child pages and how to input custom code into pagelines. I am really just looking for a article that will help me out or a youtube video.
       
       
      *Disclaimer my website does need a lot of work I am learning all of this as I go.*
×