How JustAnswer Works:
  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.
Ask Brandon M. Your Own Question
Brandon M.
Brandon M., Web Designer
Category: Programming
Satisfied Customers: 6977
Experience:  Web Design for 10 years, HTML, XML, PHP/MySQL, Perl, JavaScript, CSS
12024030
Type Your Programming Question Here...
Brandon M. is online now
A new question is answered every 9 seconds

I need to alter my mobile CSS to do two things: reference

This answer was rated:

I need to alter my mobile CSS to do two things: reference a new logo (header), and not display a wordpress plugin that is a slider too large for mobile displays. My site is www.paulmeier.com. I can provide all the relevant files. In the relevant media query, I need to add the '#header #title a' selector along with a new background rule, referencing the image I want. You may need to modify using the '!important' declaration. It's simply a little bit out of my league. Please help.

BeBoo :

Hello and welcome to JustAnswer! My name is XXXXX XXXXX I would be glad to assist you with your issue today. Please note that I am in eastern time (UTC -5:00) and am generally online between the hours of 10 AM and 4 PM and some evenings between 7 PM and 11 PM.

BeBoo :

Let me know when you are free so we can discuss.

Customer:

OK. I'm around for another 15 minutes

Customer:

so the site is www.paulmeier.com

Customer:

The header/logo is too big for the mobile css

Customer:

do you want stuff emailed to you?

Customer:

Here's the mobile css:

Customer:

/************************************************


* iPhone Media Query *


************************************************/


 


/*


Tablet and Mobile Layout: 492px.


Outer margins: 16px.


Inherits styles from: Default Layout.


*/


 


@media screen and (max-width: 524px) {


body {


font-size: 16px;


line-height: 24px;


}


#wrap {


width: 492px;


padding: 0px;


}


img {


height: auto;


}


#header_container {


width: 492px;


height: auto;


margin: 0px auto 0px;


padding: 0px;


}


#header {


width: 492px;


height: auto;


margin: 0px auto 0px;


padding: 0px;


}


#header .social_links,


#header #search_header {


display: none;


}


#logo, #logo #title a {


width: 492px;


}


#header_background {


width: 492px;


height: auto;


}


#navbar {


float: left;


width: 492px;


height: auto;


font-size: 14px;


letter-spacing: -0.4px;


padding: 0px;


}


#navbar .menu {


width: 452px;


}


.add_btn, .details_btn {


font-size: 12px;


}



/************************************************


* Homepage *


************************************************/



#homepage, #home_products {


width: 452px;


border-right: none;


}


#large_products, #small_products, .divider {


width: 452px;


}


#large_products .product_content {


width: 216px;


}


#large_products .add_btn, #large_products .details_btn {


width: 196px;


}


#large_products .feature_img {


display: block;


}


#large_products .price_tag {


width: 216px;


}


#small_products .product_column.one {


padding: 0px 7px 0px 0px;


}


#small_products .product_column {


padding: 0px 7px 0px 8px;


}


#small_products .product_column.three {


padding: 0px 0px 0px 8px;


border-right: none;


}


#small_products .product_column.four {


display: none;


}



/************************************************


* Content *


************************************************/



#content.wide, #content.left {


width: 452px;


}


#content.left {


border-right: none;


}


#content.left iframe,


#content.left embed,


#content.left object {


width: 452px;


height: 254px;


}


#banner {


width: 492px;


max-height: 256px;


}


.postmeta p, .postauthor p {


font-size: 12px;


line-height: 20px;


}


#sidebar_right {


display: none;


}


.archive_column,


.archive_column.first {


width: 452px;


padding: 10px 0px;


}



/************************************************


* Shop Page *


************************************************/



#small_products.shop_page {


width: 452px;


}


#content .products li,


#content .products li.first,


#content .products li.last,


#small_products.shop_page .product_content.first,


#small_products.shop_page .product_content {


width: 138px !important;


padding: 10px 6px 10px 6px !important;


border: none !important;


}


#small_products.shop_page .price_tag {


width: 138px;


}


#content .products li.first,


#small_products.shop_page .product_content.first {


clear: none;


}


#content .products li .price {


font-size: 12px;


}


#content div.product div.images div.thumbnails a img,


#small_products.shop_page .product_content .feature_img img {


max-width: 136px;


max-height: 136px;


}


#content .products li strong {


font-size: 13px;


}


#small_products.shop_page .add_btn {


width: 118px;


}


.related.products .products .product.last {


display: none;


}



/************************************************


* Checkout *


************************************************/



.jigoshop-cart #content table.shop_table {


margin-left: -5px;


}


a.checkout-button.button-alt {


margin-top: 10px !important;


}



/************************************************


* Featured Slider Small *


************************************************/



#hometop, #homeslider {


width: 492px;


height: 256px;


}


#homeslider h2 {


font-size: 24px;


line-height: 30px;


padding: 12px 0px 6px 0px;


}


#homeslider p {


height: 50px;


}


#homeslider .product_title {


width: 492px;


margin: 0px 0px 10px 0px;


}


#slider1 {


width: 492px;


max-height: 256px !important;


overflow: hidden;


}


div.anythingSlider {


width: 492px !important;


}


div.anythingSlider li .feature_img, div.anythingSlider li .feature_img img {


width: 492px;


height: 256px;


}


div.anythingSlider .anythingWindow {


width: 492px;


height: 256px;


}



/* Navigation Arrows */


div.anythingSlider .arrow.forward,


div.anythingSlider .arrow.back {


margin: 110px auto 0px;


}



/************************************************


* Footer *


************************************************/


 


#footer_container, #footer {


width: 492px;


margin: 0px auto 0px;


padding: 0px;


}


#footer_menu {


width: 472px;


}


#footer .footerleft p {


font-size: 11px;


}



}

Customer:

So my issue is two part

Customer:

1. My logo/header is too big for the mobile version of the site

Customer:

2. The slider I'm using (Riva slider) is too big for the mobile site

Customer:

by big I mean too wide

BeBoo :

#logo, #logo #title a {


width: 492px;


}

Customer:

I need to make the riva slider not appear, or magically get smaller

BeBoo :

You already have that selector so we can just work off of it.

Customer:

and to reference a new image

Customer:

cool

Customer:

I'm going to have to ditch out in a sec, but I'll be back at 5PM eastern

BeBoo :

Nevermind, that is actually different. What is the name of the mobile header image?


 

Customer:

I haven't created it yet, but I can call it whatever the hell you'd like me to

Customer:

:)

Customer:

and I will make it fit those dimensions

BeBoo :

Doesn't matter, go ahead and upload it and provide me with the url


 


 


 

Customer:

one sec

Customer:

http://www.paulmeier.com/wp-content/uploads/2013/06/mobile492.jpg

BeBoo :

#header #title a {


background: url('http://www.paulmeier.com/wp-content/uploads/2013/06/mobile492.jpg') no-repeat;


}

BeBoo :

Try that for the header.

Customer:

updating...

Customer:

I'll clear my iphone cache and check this- i'm running out the door right now

Customer:

I will be back at 5pm eastern and again at 11pm eastern

Customer:

thank you for your help thus far

BeBoo :

Ok. And for the other one, you want this:

BeBoo :

#riva-slider-2-shell { display: none; }

Customer:

put that in the mobile css?

Customer:

where ?

BeBoo :

No problem. I will be on probably around 6pm eastern. Yes

Customer:

just throw it on the bottom?

BeBoo :

that is ine

BeBoo :

fine*

Customer:

ok i'll check in with you later. thanks!

BeBoo :

No problem. Talk to you in a bit.

Customer:

ok

Customer:

so it appears that it's working as far as hiding the slide show

Customer:

however, it also looks like the logo hasn't changed

Customer:

i'm double checking to make sure that the file is there

Customer:

it is

Customer:

Hi I checked and replaced it with http://www.paulmeier.com/wp-content/uploads/2013/06/mobile_logo.png

Customer:

i'm clearing my mobile cache again and checking

Customer:

just in case it's too big I dropped it to a 350 width and reuploaded it as http://www.paulmeier.com/wp-content/uploads/2013/06/mobile_logo350.png

Customer:

checking now

BeBoo :

Try putting !important in the background line

Customer:

it's still cutting it off... and I don't think there has been a change

Customer:

perhaps I need an !important!

Customer:

marking?

Customer:

how would i set that up?

Customer:

ah

Customer:

sorry i didn't see your chat

BeBoo :

Hrm, wait - I think you put the code in the wrong place

Customer:

i need help with the syntax

BeBoo :

The slider is missing from the desktop

BeBoo :

version

Customer:

really?

Customer:

eee

Customer:

I only placed that in the style-mobile.css

Customer:

and yet, yes it is missing from the normal version of the site- that's no good

Customer:

i just searched the main css and there is no mention of riva anywhere, so I know i only placed it on the mobile...

BeBoo :

You might've placed it outside the {} for the media selector. Just a sec,

Customer:

k

BeBoo :

Ok, for the slider, just above the last line you put in, you should see a }

BeBoo :

Move the line just above that last one.

Customer:

ahhhhhhhhh

Customer:

i think i know what you mean

Customer:

one sec

Customer:

great

Customer:

fixed, yeah?

Customer:

so when i load on my iphone now i see the new logo briefly, and then it pops back to the big logo

Customer:

that doesn't fit

Customer:

would the !important declaration work?

Customer:

how exactly do I write that out?

Customer:

#logo, #logo #title a {
background: url('http://www.paulmeier.com/wp-content/uploads/2013/06/mobile_logo350.png') no-repeat;
width: 492px;
}

BeBoo :

Just before the last ;, put !important

BeBoo :

so: background: url('http://www.paulmeier.com/wp-content/uploads/2013/06/mobile_logo350.png') no-repeat !important;

Customer:

#logo, #logo #title a {
background: url('http://www.paulmeier.com/wp-content/uploads/2013/06/mobile_logo350.png') no-repeat;
width: 492px !important;
}

Customer:

it still plays the first briefly and then it becomes the big logo

Customer:

perhaps it needs to be exactly 492px wide?

BeBoo :

No, probably not firing correctly.

Customer:

I'll try that- would you like to look at the main css?

BeBoo :

I see

BeBoo :

You put the !important on the width, not the background

Customer:

ugh

Customer:

fml

BeBoo :

See my response above

Customer:

hell yeah!

Customer:

there we go

Customer:

i'll just tinker with that image now

Customer:

you earned your cash

Customer:

thanks for the help

BeBoo :

No problem at all. Glad to hear it works!

Customer:

i really don't see where to accept your answer

Customer:

i already rated you- did you get credit?

BeBoo :

It did but not fully. Can you try again?

Customer:

yep

Brandon M. and other Programming Specialists are ready to help you