Public Forums 71,145 posts

[digitalmedia Friend digitalmediaJoin date: December 2015Posts: 8Downloads:4Uploads:3]

#1083925

i have 1 logo image centered in masthead .

it seems centered, but when I reduce the browser window to simulate the vision in the mobile version the image of the logo is not centered.

The source code of my masthead is this:

<div class="jumbotron jumbotron-primary masthead"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" title="x" src="images/logo/logo-head.png" alt="x" width="480" height="114" /></div>

The custom css is this:

/* Custom CSS */

/* padding masthead all */
.page-masthead .row-feature {
    padding: 10px 0;
}
/* color masthead my */
 .page-masthead .row-feature-primary-my {
    background: #f7f7f7 none repeat scroll 0 0;
    color: #bbe6ff;
}

What should I do to get the image centered even in the mobile version?

Thanks so much.

• This topic was modified 6 years, 4 months ago by  digitalmedia.
• This topic was modified 6 years, 4 months ago by  digitalmedia.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1084162

Hi
If you defined the image width in the style it will follow the same for all views.
Kindly make it 100% width so it will be responsive Also share the URL of the site so i can check it for you.

Regards

[digitalmedia Friend digitalmediaJoin date: December 2015Posts: 8Downloads:4Uploads:3]

#1084319

Thanks for the reply

I tried on the local host.

first I tried to remove width and height with the following masthead source code

<div class="jumbotron jumbotron-primary masthead"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" title="x" src="images/logo/logo-head.png" alt="x" /></div>

then I tried to set only widht to 100% with the following mastehad source code

<div class="jumbotron jumbotron-primary masthead"><img class="img-responsive" style="display: block; margin-left: auto; margin-right: auto;" title="x" src="images/logo/logo-head.png" alt="x" width="100%" /></div>

the problem remains, the masthead image is not centered in the mobile vision.

You can see my masthead in this url xxx

now on line i have removed image width and height from the source code.

thank you very much for the time you are dedicating to me and happy new year.

• This reply was modified 6 years, 4 months ago by  digitalmedia.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1084362

Hi
Open template folder /css/custom.css file and add below code

@media screen and (max-width: 767px){ .page-masthead .jumbotron {   padding-left: 0px!important;}}

save code, clear cache and check.

Regards

[digitalmedia Friend digitalmediaJoin date: December 2015Posts: 8Downloads:4Uploads:3]

#1084743

I checked it, this latest solution work fine for me.

Thank you so much I would never have succeeded on my own.

Regards

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1084893

You are welcome!

[Author]

Posts