Site URL: http://www.midwestcleancomedy.com
Please advise on the best way to present my question and the info you need as I'm a beginner. Here's a codepen I created that just has my custom CSS at the top, and the parent theme CSS which starts at line 252
I've cleared my cache, enlisted WP designers, and they were unable to pinpoint what is going on. Some of my early custom CSS worked, but most of it is being ignored, even if it's at the bottom of my stylesheet with !important as a last resort.
Since this happens many places, I feel like once I find the issue it will hopefully lead to solving others. It's now affecting nearly every change I want to make.
Current issue: Making my site responsive at the mobile width,
#media (min-width:320px) and (max-width: 479px) {
. container .et_header_style_left #logo {
max-width: 80% !important;
float: left;
}
}
Just trying to get the logo on the left and the menu icon on the right, same line, but nothing I try seems to change the logo width or the menu's left padding: 175px.
I had someone look at my style sheet, and it was a mess. I don't know exactly what they did, but they said there were formatting errors everywhere. #media issues abounded. Sorry I can't be much more specific, but basically I had to start a brand new style sheet and make much better notes. Thanks to everyone who responded.
Related
I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
Question: How does one use css #media to target all screens below 1024x600?
I need to tell all small monitor screens to use overflow-x:scroll.
Context: I had to use the following CSS rule on both the HTML and BODY tags:
overflow-x:hidden !important;
(Otherwise certain animations cause ugly horizontal scrollbars to appear on the page.)
But now, when viewing my site using smaller screens, it would be nice if the user could scroll the page horizontally.
I'll keep looking for a css snippet that does this, but I'm posting this because the site just went live and it's about to get hit with tons of traffic, so I need something quick.
I found answers pretty quickly (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml), but I still need to figure out how to test this online.
/* CSS that's applied when the viewing area's width is 800px or less */
#media screen and (max-width: 800px){
html{
overflow-x:auto !important;
}
body{
overflow-x:auto !important;
}
}
Where does one go to test if this actually works, because testsize.com doesn't show the scrollbars (and I'm not sure if it's their limitation or my own).
I'm working with the Portfolio-Press theme in Wordress. I've added a 980px wide file as the logo to give me a "banner" look. Its a weathered wood plank look. To take care of the margins to the left and right of this file that end up white, I've put a weathered plank file in the "branding" div, which is underneath the "logo" div, and given it a repeat-x so that it fills in the blanks no matter what size the screen is set at. Works OK, except when the browser is sized below 750px. There is a #media css call that activates which makes the background shift down about 100 px AND screws up the menu bar. You'd think this would be easy to find and correct, but I'm a dummy. I've searched for this css call and can't find it in a real css file. It must be generated by script or something.
The question is, is there anything that I can do about this without rewriting the javascript or whatever is writing this css? And, if its javascript that has to be rewritten, where the heck is it?
You can view the site at
www.bufalobobschalupas.com
ITs easy to see the css changing if you run it with developer tools open, and choose the "branding" div, inside the "wrapper" div.
It's hard to give a line number as the css is all minified but this is your culprit;
#media screen and (max-width: 750px) {
#branding {
width: 46%
height: auto;
}
}
Remove the width and height attributes and it looks fine.
And you'll maybe want to add a media query at that screen size which removes the padding from .col-width
.col-width {
padding: 0;
}
EDIT: Realised I'd only half answered your questions. The css file in question is;
http://chalupaholics.com/wp-content/w3tc/min/3b548d20.31cc2f.css
I don't know how that's being generated but I imagine by a plugin that's compiling the css into a single file for reduced page requests and minifying it. I'm saying that because the css and JS is being added unusually high up in the order, even before the meta data. Search through your install using Grep or Astrogrep on Windows to find the source of this CSS before the plugin has acted on it and modify it there.
In trying to find out how to add borders correctly to the thumbnails in Portfolio view, I found this post that describes the css elements I needed to update:
http://wordpress.org/support/topic/theme-portfolio-press-cant-remove-the-grey-border-on-the-thumbnails
"In your CSS file, find: #content img, img.thumbnail and remove
border: 1px solid #DDD;"
Then I override the style as I need in the header.php, directly above the closing < /head> tag. It is a bit of a hack, but I like it better than editing at the end of a long CSS file. I figure this guarantees my CSS directive will be the last to be loaded and I will always sees my small modification at the top of the file.
Not sure if this helps, but it took me a bit of searching to figure out the CSS to edit. I thought this might be a good place to share that find and how I was able to use it.
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice