- This topic has 17 replies, 3 voices, and was last updated 10 years, 2 months ago by
.
-
Posts
-
Hi, I really, really need your help on this. When this site is viewed on a cell phone, it is not centered (the header area, basically). It's all off and it is going to be viewed by people tomorrow. Any idea how to fix this would be greatly appreciated.
http://hdfamilylawgroup.com/You need to add CSS to change the widget width to 100% in your media queries. The Studio Press mobile responsive test site will help you see what needs to be done http://www.studiopress.com/responsive/.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?Hi Victor,
thanks so much for your response. I can see that the 320x480mobile and 480x640 small tablet sizes needs adjusting. I do not know what css code exactly I need to enter in. Can you please help me with this?
Put this after the desktop styles (the ones outside media queries).
@media (max-width:600px) { .site-header .widget-area .widget-area #text-8.widget, .site-header .widget-area .widget-area #text-5.widget { display:block; float:none; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; } }Remember, if you don't use mobile first CSS anything done outside a max-width will need to be over-written in the media query.
I find it best to install developer tools and set my settings in my browser to get the viewport width. The break point on the two widgets in the head is about 600px. Mobile and touch devices come in many, many sizes.
Hi, thank you so much. I am still not understanding exactly what to do and where the code goes. I put it at the very end of the css sheet (last thing) but nothing happened. I'm stuck and have never done this particular thing before.
It goes in the style.css file in your theme folder. It needs to be last in the CSS after all others. If you have a cache plugin, clear it. If you have the ability to change the version after the style.css?ver=2.1.1 then change that instead.
If you did add it there, it's not showing up when I look at your style sheet.
Remember that you styled the widget area:
/* Widget Area --------------------------------------------- */ .site-header .widget-area { float: right; text-align: right; width: 720px; } .site-header .widget-area .widget { margin-bottom: 0; } .site-header .widget-area #text-5.widget { display: inline-block; float: right; } .site-header .widget-area #text-8.widget { display: inline-block; float: left; padding: 30px 0 0 40px; }These styles are global styles, meaning that all viewports (all devices at all sizes) see them.
When you use explicit widths in this area (such as width:720px) you're going to have issues on devices less than 720px, so instead use "max-width:720px".
If you use floats here and padding here, all of that needs to be over-written by a max-width media query that comes after this one. That is the stuff I sent earlier. It goes after any and all styles associated with this at all max-widths. So put it just before the @print styles. Save it, clear cache and see what happens. When developing, don't use a caching program, set it up afterwards. Makes life easier.
Don't use quotes around css styles.
Instead of
.site-header .widget-area { float: right; text-align: right; width: 720px; }use:
.site-header .widget-area { float: right; text-align: right; max-width: 720px; }
thank you so much, again. i'm having such a difficult time because I think it's just over my head. I still can't get it right and removed whatever I tried to adjust and/or add so that I don't mess anything up.
I'm sorry you're having a difficult time.
I can't actually do it for you, you may want to hire someone. There's Brad at http://wpsites.net/contact/ -- he rocks! He will need your ftp information. Don't share it on the forum.
But before you go that route:
Are you working on the child theme? That is the style sheet you need to edit.yourdomain.com/wp-content/themes/enterprise-pro/style.css
Make a copy on your local hard drive with the date and time and then you have a backup.
Clear your cache in your cache plugin (see your plugins in the wp-admin and read their instructions).
thank you. I am unable to afford to pay someone. I tried to contact someone I knew but she hasn't responded. If anyone else can help with very specific instructions as to exactly where I need to place things, I would appreciate it. I don't know if I need to put codes in more than one place in the css sheet or not. I'm extremely confused and am having these people continuously email me for answers on fixing their site.
1. There's only one style sheet you need to add your css to:
wp-content/themes/yourchildthemename/style.css
OR go to Editor in your Admin and select style.css
Make a copy of the text in a plain text editor before you begin.
You add the media query last in one location only. Scroll all the way down, after the last curly bracket -- after it, not inside -- paste this in and save the file:
@media (max-width:600px) { .site-header .widget-area .widget-area #text-8.widget, .site-header .widget-area .widget-area #text-5.widget { display:block; float:none; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; } }
Clear your caching plugin. Every time I've checked the file for this CSS, it's not there. Until it's added AFTER all others with the same class then you won't see any changes. If a site is cached either by a caching program or on an individual's browser, all changes won't be visible. Instruct your client to clear cache after you have added the CSS last.
No one will see changes unless you:
Save the style sheet
Clear the browser cache -- that is everyone whose visited the site
Clear your caching in any caching plugin.
I've now entered it in as the very last thing on my stylesheet (style.css). There are no changes that I see on my iphone even after clearing the cache/history/data. Any idea why it's still not centering? I wonder what I did wrong. I also cleared it on my laptop (where I'm working on this) as well as via the plugin.
Yes, now it is in the CSS.
Now it's added, I made an error in the class specification, this new code below will work:
See image:
@media (max-width:600px) { .site-header .widget-area #text-8.widget, .site-header .widget-area #text-5.widget { display:block; float:none; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; } }
Oh my goodness! It worked! Thank you so, so very much! I really do appreciate all of your help. I'm finally almost where I need to be with the site. 🙂 Now if I can just figure out the other thing and get a response. Thanks!!!
What is the other thing? If I know the answer, I'll share it. I'm very new to WordPress but my CSS skills, when I'm not tired, are very, very good.
Haha, thanks!
This is the link to the other issue I had:
Basically, I need to make the home page uniform with the other pages on the site. The background used to be completely white on the home page. I now changed it so that the background is now that light gray color. That is good, but in order for it to match the rest of the site, I would need it to have the white "boxed" area around the content (for example: http://hdfamilylawgroup.com/about-us/). I'm not sure how to accomplish this.
I also don't know if you have an idea how to adjust the header so that the logo is in the center and the address (which is currently in the center) is on the left (where the logo currently is). So, basically switching he logo and the addresses. Hopefully, if this can be done, it doesn't mess up the beautiful code you just helped me with to center things on mobile devices. 🙂
thanks so much!
- The forum ‘General Discussion’ is closed to new topics and replies.