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: 6976
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

Resolved Question:

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.
Submitted: 1 year ago.
Category: Programming
Expert:  Brandon M. replied 1 year ago.

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., Web Designer
Category: Programming
Satisfied Customers: 6976
Experience: Web Design for 10 years, HTML, XML, PHP/MySQL, Perl, JavaScript, CSS
Brandon M. and 5 other Programming Specialists are ready to help you

JustAnswer in the News:

 
 
 
Ask-a-doc Web sites: If you've got a quick question, you can try to get an answer from sites that say they have various specialists on hand to give quick answers... Justanswer.com.
JustAnswer.com...has seen a spike since October in legal questions from readers about layoffs, unemployment and severance.
Web sites like justanswer.com/legal
...leave nothing to chance.
Traffic on JustAnswer rose 14 percent...and had nearly 400,000 page views in 30 days...inquiries related to stress, high blood pressure, drinking and heart pain jumped 33 percent.
Tory Johnson, GMA Workplace Contributor, discusses work-from-home jobs, such as JustAnswer in which verified Experts answer people’s questions.
I will tell you that...the things you have to go through to be an Expert are quite rigorous.
 
 
 

What Customers are Saying:

 
 
 
  • My Expert answered my question promptly and he resolved the issue totally. This is a great service. I am so glad I found it I will definitely use the service again if needed. One Happy Customer New York
< Last | Next >
  • My Expert answered my question promptly and he resolved the issue totally. This is a great service. I am so glad I found it I will definitely use the service again if needed. One Happy Customer New York
  • Wonderful service, prompt, efficient, and accurate. Couldn't have asked for more. I cannot thank you enough for your help. Mary C. Freshfield, Liverpool, UK
  • This expert is wonderful. They truly know what they are talking about, and they actually care about you. They really helped put my nerves at ease. Thank you so much!!!! Alex Los Angeles, CA
  • Thank you for all your help. It is nice to know that this service is here for people like myself, who need answers fast and are not sure who to consult. GP Hesperia, CA
  • I couldn't be more satisfied! This is the site I will always come to when I need a second opinion. Justin Kernersville, NC
  • Just let me say that this encounter has been entirely professional and most helpful. I liked that I could ask additional questions and get answered in a very short turn around. Esther Woodstock, NY
  • Thank you so much for taking your time and knowledge to support my concerns. Not only did you answer my questions, you even took it a step further with replying with more pertinent information I needed to know. Robin Elkton, Maryland
 
 
 

Meet The Experts:

 
 
 
  • ATLPROG

    Computer Software Engineer

    Satisfied Customers:

    7463
    MS in IT.Several years of programming experience in Java C++ C C# Python VB Javascript HTML
< Last | Next >
  • http://ww2.justanswer.com/uploads/SP/spatlanta2010/2011-6-23_12450_photo.64x64.gif ATLPROG's Avatar

    ATLPROG

    Computer Software Engineer

    Satisfied Customers:

    7463
    MS in IT.Several years of programming experience in Java C++ C C# Python VB Javascript HTML
  • http://ww2.justanswer.com/uploads/ComputersGuru/2010-02-13_051118_Photo41.JPG LogicPro's Avatar

    LogicPro

    Computer Software Engineer

    Satisfied Customers:

    5603
    Expert in C, C++, Java, DOT NET, Python, HTML, Javascript, Design.
  • http://ww2.justanswer.com/uploads/unvadim/2010-11-15_210218_avatar.jpg unvadim's Avatar

    unvadim

    Computer Software Engineer

    Satisfied Customers:

    1158
    Good knowledge of OOP principles. 3+ years of programming experience with Java and C++. Sun Certified Java Programmer 5.0.
  • http://ww2.justanswer.com/uploads/lifesaver333/2010-10-17_191349_ls.jpeg lifesaver's Avatar

    lifesaver

    Computer Software Engineer

    Satisfied Customers:

    950
    Several years of intensive programming and application development experience in various platforms.
  • http://ww2.justanswer.com/uploads/EH/ehabtutor/2012-8-2_202016_1.64x64.jpg ehabtutor's Avatar

    ehabtutor

    Computer Software Engineer

    Satisfied Customers:

    864
    Bachelor of computer science, 5+ years experience in software development, software company owner
  • http://ww2.justanswer.com/uploads/RA/rajivsharma086/2012-6-6_17128_displaypic.64x64.jpg Raj's Avatar

    Raj

    Computer Engg.

    Satisfied Customers:

    860
    BE CS, 4+ Experience in Programming and Database (ERP)
  • http://ww2.justanswer.com/uploads/eljonis/2010-01-06_130406_eljon2.jpg Eljon's Avatar

    Eljon

    Consultant

    Satisfied Customers:

    590
    11 yrs of programming (PHP, WordPress, XSL, SQL, JavaScript)
 
 
 

Related Programming Questions