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.
Related
On one of my sites, while the page loads images appear much bigger than they are supposed to (as specified in the CSS)
I was thinking that it might be something related to the size of the images, but no.
I tried changing the 'display' property but that did not help either. I'm thinking that perhaps it's some JS related resizing issue, but I don't really know how to test for it. The blocks are powered by OWL-Carousel, but I tried searching for such an issue and came up empty handed.
** Thanks for the answer - which was given by Benjamin. The issue was caused by FOUC, Above the fold rendering of the elements. Once I added the "critical CSS" (that loads before OWL carousel actually does), the issue dissepated.
What you're dealing with is something akin to what's known as FOUC (Flash of Unstyled Content) - though the cause for you appears to be related to your "owl carousel" which takes a moment to initialize, and your site relies on that for the actual final appearance.
You don't have any CSS that gets the layout close enough before the Owl Carousel loads in. If you applied something like the following CSS to it, it would get it pretty close (at least on desktop, I didn't check the actual appearance before/after on mobile, but that could be amended with an #media query)
.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}
Basically, if you rely on JavaScript based DOM manipulation for your final layout, you'll either want to apply some CSS that gets it close first (and doesn't affect the final layout, hence the Direct Child Combinator above: > - your carousel adds containers, so it won't affect it after it's done loading") - or use some kind of loading animation on the parent element that you hide when it's fully loaded.
So this is an "issue" that I've been experiencing for a new website that I've been building.
It utilizes WP Bakery's Visual Composer Row widget, and occurs when the CSS/JS kicks in to expand the header row from default to stretch.
Because the header row has a background colour, the initial header looks like this. However, when the CSS/JS kicks in to expand the row, it then "flickers" and looks like this.
This obviously looks very unprofessional, and was wondering can suggest anything that I could try.
Would appreciate any assistance.
Thanks!
This is similar to other FOUCs (Flash of Unstyled Content). You have a few options.
One is to add the stretch attributes to the element in question specifically. Basically take: .stretch { width: 100%; margin: 0 auto /* … whatever */ } and apply those styles to your element, ideally by ID: #my-header { width: 100%; margin: 0 auto /* … whatever */ } and put them in your header so they're loaded right away, perhaps in your Customizer.
Another option is to find another way to add the stretch class to that element manually. I'm not familiar enough with VC to give examples (though, to be honest the few sites I've made that use it haven't seemed to have this issue?). The benefit of this would be that you don't need to duplicate CSS attributes, and don't need to wait to JS to apply the class, which probably isn't happening until the entire footer is loaded.
Another option is the all-too common (and arguably unnecessary/annoying) "full page loader". This is the option I'd avoid if I were you, but you can plop in a full screen white page with your logo and a spinner that goes away when the entire markup is loaded or when all resources are fetched. This delays users accessing your site, and most users would prefer to see a FOUC than a loading screen, based on my limited testing.
I'm having trouble making my header responsive. When I view the site from a full-sized browser window, or from a phone, it's fine. (I've got "#media only" queries set up for mobile.) But if I adjust my browser window to anything in between the two, the div on the left side of the header runs into the one on the right.
I have a feeling it's because I've inserted the logo into the website via the header.php file. If it wasn't there, I'm sure the header would be responsive.
How do you handle this? Is there some "#media only" query I can set up to address the in-between browser sizes?
You can view the test site in question here: http://kahamarketing.com/wyckoff/wordpress/
I'm having a similar problem with the three banners in the footer, which run into one another if I make my browser window any smaller. Similarly, I added these elements through the website's footer.php file.
Thanks in advance for your help.
in your case the height rule for a.logo makes it broken. take out the line with height: 60px
maybe after that you need to take out the margin-top rule for nav.navigation
for your footer problem it is a bit more complicated.
hard to explain without knowing how much you actually know about CSS
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.
I'm using the Nivo Slider and all the images are the same "height/Width" 766x400 but when viewing the slider in Firefox it up-scales everything to a masive 1,333px × 696px.
The interesting thing,when you do a split screen in the browser everything looks fine but full screen everything is blown up.
I'm wondering what CSS code I should be using to fix this issue
I would post my whole "code" but the images are related to my business and I'm not really sure.
Thanks
This may be caused by inline styles set by Nivo Slider, but it's hard to tell what the cause can be with example CSS/markup.
However the basics for responsive images is to make sure the width (or, often preferably, the max-width) is set to 100% and that the height is set to auto. If there's inline CSS that will override your own CSS so you may either need to add !important to those rules or edit the plugin files for Nivo Slider and remove the printing of inline styles.
So basically, try this (but you may want to use a more specific selector and you shouldn't use !important unless it's absolutely necessary):
img {
max-width: 100% !important;
height: auto !important;
}