Logo - Image Block or Content Block

Permalink 1 user found helpful
Hello Community - I'm using Concrete5 5.7. and need some assistance with putting in a logo and keeping the size when viewing on a mobile or reduced size viewing. (I'm using Elemental.)

Ok, when using Concrete 5 5.7, when I put in a logo image using either an image block or content block, the image look fine in regular view on a desktop/laptop. However, when I view it on a smaller screen such as mobile or I reduced the screen, the image shirt substantially, in that you can barely seen the image of my logo.

Is there a way I can retain the actual size or when in mobile or small screen mode, the image does not go that small. Can I control or size or view of the logo image in mobile mobile? If so, how would I go about doing this please. Thanks in advance for any assistance.

View Replies: View Best Answer
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi ponz845,

Can you take screenshots of what it looks like on desktop and with a narrow window.

What is the link for the site?
ponz845 replied on at Permalink Reply
Thanks for the quick reply my friend -

Here is the link: advanceonlawsuitsettlements.com

As you can see, when in "regular" screen mode, the image looks fine, but when you slim the screen/minimize the screen or look at it on your cell/mobile phone, the image look way small. I When I look at other sites, which I guess uses other web design programs, the logo image is in a big size.

It doesn't matter what size image I use, the image shrink significantly. Any advice please?
MrKDilkington replied on at Permalink Best Answer Reply 2 Attachments
MrKDilkington
There are issues with the logo.

- The cropping of the image. There is unnecessary white space around the logo.
- "Oklahoma injury lawyers" is using a small font size, grey color, and a thin font. It will not scale well on smaller screens.

I attached a cropped version of the logo.

If you have access to the original logo files, I recommend using an SVG version of the logo. SVG is a vector format that scales very well.

SVG files can be used with this block.
https://github.com/Mesuva/svg_image...

An additional approach is editing the Bootstrap classes in header.php. Editing the Bootstrap classes is much more involved. The original lines have been commented out and changed lines are below them.
concrete\themes\elemental\elements\header.php

<?php defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header_top.php');
$as = new GlobalArea('Header Search');
$blocks = $as->getTotalBlocksInArea();
$displayThirdColumn = $blocks > 0 || $c->isEditMode();
?>
<header>
    <div class="container">
        <div class="row">
            <!-- <div class="col-sm-4 col-xs-6"> -->
            <div class="col-sm-4 col-xs-10">
                <?php
                $a = new GlobalArea('Header Site Title');
                $a->display();
                ?>

Editing a core file this way is only temporary. Future updates will overwrite the change. To prevent a future overwrite, you need to make a copy of the Elemental theme.

There is an attached screenshot of what the site will look like after editing the Bootstrap classes.

Here are instructions for making a copy of the Elemental theme:
http://www.concrete5.org/community/forums/5-7-discussion/css-theme-...
ponz845 replied on at Permalink Reply
MrKDilkington -

Thank you very much for your help brother! I did the last option (header.php) and it work Great! Stay well my friend.