Please help, logo getting cut in mobiles

Hi all,

Need help with top logo getting cut in mobiles for this page
http://myintelliron.com/projects/maria/frontend/web/

Any help will be appreciated

Best Regards,
Krish

 

Hi.
If this one line gets toggled-off (inside following block in style.css lines #2213 - 2266), will your logo be cut-off still?

/*******************************************************
********************* 20.RETINA DISPLAY
*******************************************************/
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
   /* lOGOS */
   .spo-logo,
   .white-header .spo-logo{
     background: transparent url('../images/logo2@x.png') no-repeat !important;
     /*background-size: 100% !important;*/
   }
   ...
}

Code (CSS):

Am a bit curious about that block though: is it necessary to cope with "retina display" resolution devices?

 

Looks like you perfectly nailed it . Just waiting for few more tests before choosing as best answer.

I have been trying with following with no luck

background-size: contain !important;

Code (markup):

I will update soon.

Thanks a ton!

Best Regards,
Krish

 

Well, just from a design perspective that site is FILLED with accessibility failings that mean responsive is going to be a broken mess; all the stepping stones a page should have before media queries are even added are nowhere to be found. Perfect width images, multiple perfect height elements, it's just asking for the site NOT to be user friendly at ANY resolution.

... and that's BEFORE we talk the illegible colour contrasts (like the white over images, black over images, grey on white, dark grey on darker grey), illegible fixed metric (px) font declarations, lack of elasticity in design, etc, etc...

Of course popping the bonnet to look at what's really going on, and, Well there's your problem... You've stepped in bootcrap and tracked it all over your sites carpets -- hence the endless pointless DIV for nothing, endless pointless classes for nothing, presentational use of classes, nothing remotely resembling semantic markup or logical document structure, and the general laundry list of how not to build a website that's so typical of the bloated halfwit broken nonsense known as bootcrap.

Gets even worse with the stupid X-UA nonsense, lack of media targets on the stylesheet link, multiple separate stylesheets doing the job of one, multiple separate scripts for Christmas only knows what, presentational images in the markup, stupid malfing data- attributes for stuff that has no business in the markup, utter and complete gibberish use of numbered headings (under 5 or 4 models) -- hardly a shock it's wasting 40k of markup on 5.4k of plaintext and what looks like maybe a dozen and a half content images; easily three times what should have been used... much less the ape-shit ridiculous 5.7 megabyte pageload in 67 separate files, 1.2 megabytes in 24 files being "JS for nothing" and another 400k of that in 14 files being CSS -- numbers that can only be explained either by developer ineptitude of the highest order, or simply blindly slapping together off the shelf code and crossing one's fingers in prayer that it works.

It's a laundry list of how NOT to build a website, and my advice would be to pitch that entire mess in the trash, ACTUALLY learn how HTML and CSS work, and start over clean with logical document structure, semantic markup, separation of presentation from content, progressive enhancement, and paying attention to accessibility norms as outlined in things like the WCAG.

The logo? That's the LEAST of your problems in that mess.