On this webpage (actually, the entire blog section), some images are responsive, and some are not. When I try to put a max-width on the images, they don't fit within the confines of the parent. Is anyone a little wiser about what could be happening here, especially when it's not happening elsewhere on the site?
Appreciate it!
http://www.sensoft.ca/blog/never-know-youll-find/
Add following CSS to your theme's Style.css file:
.wp-caption {
max-width: 100%;
}
Related
I have a WooCommerce site built with the Avada Theme. I've attempted to make the image gallery 'sticky' on product pages. The idea is to make the Image Gallery scroll down alongside the short product description / add-to-cart section on the right column, which tends to be longer.
I saw a line of code on this article here, which helped work out the code for the Avada theme (I'm using Avada's image gallery instead of WooCommerce's):
.avada-product-gallery {
position: sticky!important;
top: 0!important;
}
Correct me if I'm wrong, but from what I get from the linked article, this line of code hereabove would work, but needs overflow:visible on the body or bigger container where the gallery is.
I am learning coding at the moment so I'm kind of fishy on the subject - with all respect to fish. I have tried to trace back the container where I have to add the overflow: visible!important, but it's resisting me, so I am kind of lost with the code at something like:
XXXXXXXXXX .XXXXX {
overflow: visible!important;
}
I leave you an example of a product page I'd like to change to see if someone can help me identify the container which I have to refer on code to change the overflow display:
https://architectoutlet.com/shop/gifts/gifts-for-science-lovers/ti-asia-blue/
I come up with .flex-viewpoint .product { ?? .Fusion-row .product {?? avada-single-product-gallery-wrapper avada-product-images-global avada-product-images-thumbnails-left ??
I am all ears and open to learning, so any tip on the matter is welcome!
Thank you
best regards to all :)
You can add your own custom javascript
.avada-product-gallery is your product page gallery class
jQuery(window).bind("load", function() {
var width = jQuery(window).width();
if (width > 767) {
jQuery(".avada-product-gallery").stick_in_parent({offset_top:60});
}
});
Tested & It's working from my end.
Thanks in advance
My site is the following:
http://www.evarancho.com/
The problem is that the email on the header is hiding when you make the screen smaller. I don´t know how because it was not happen before and it just started out of nowhere.
I have tried this css line but it is not working.
.w-text-h{display:show !important;}
I don´t know what to do. Any help is appreciated.
Thank you!
I see it on the screen in mobile.
Anyways, display: show is not right.
Try display: block !important
It is difficult to narrow down.
I suspect this is the issue:
#media (max-width:600px) {
.header_hor .l-subheader.at_top {line-height:36px;height:36px;}
**.header_hor .l-header.*sticky* .l-subheader.at_top {*line-height:0px;height:0px;overflow:hidden;*}**
.header_hor .l-subheader.at_middle {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_middle {line-height:50px;height:50px;}
.l-subheader.at_bottom { display:none; }
.header_hor .l-subheader.at_bottom {line-height:50px;height:50px;}
.header_hor .l-header.sticky .l-subheader.at_bottom {line-height:50px;height:50px;}
The line height 0 and all all that would definitely be a problem and I believe it is set to sticky (in the us.headerSettings javascript source on the page, the header is set to sticky). A possible quick fix, rather than editing the CSS (suggested process mentioned below), might be to make the header not sticky in the settings. Though I'm not familiar with this theme, so I can't be sure that that will fix it, but it's a good bet.
If not the above, this might be the next place to look:
#media (max-width:600px) {
.ush_text_3 { font-size:13px; }
}
.ush_text_3 { white-space:nowrap; }
Perhaps the nowrap is causing an issue? I'd see what happens if it's removed.
These changes can be made in the css style file directly with to issues: 1. if you break it it's not easily recovered and 2. you'll lose changes with theme update.
Usually, making a child theme and adding the custom changes in the child themes style is recommended.
This can be done with one of many wordpress child theme plugins. I recommend Child Theme Configurator
There's also an error with the color in the css file, but it isn't the issue as it's just ignored:
.ush_text_3 .w-text-value { color:; }
(see errors here.)
I had a design sliced to html and it looked great. Then I converted it into a WordPress theme and a spacing appeared at the top of the website in every browser except FF. When turning to firebug the head tag seems to be empty and all html that should be there, appears to be in the body.
https://www.opolo.nl/kitchenaid/
Did anybody have this problem before and have a solution? Since this is a live website, I solved this by giving the header a position of absolute, but since a new project shows the same issue, I'm looking for a solution.
Foundation was used for the responsive part. Could it be WordPress and Foundation have problems? All javascript files are included by wp_register_script and wp_enqueue_script and are located in the footer. Moving them to the header didn't solve the problem.
you have a padding and font size set and something that counts as text within your body before your header
body{
padding: 0px !important;
font-size: 0px !important;
}
its not really a good idea to be setting dimensions for html body etc if not needed. a lot of code examples will style body tags so if using them you should change the container names from body to something else.
How do I control the width or responsive width of the CODE tag in a Wordpress post?
Under the comments section on this post, the text, "You may use these HTML tags and attributes:" and the code elements after it, doesn't fit the width of the container of this responsive website design.
This line of code examples simply extends out past the container it's in. Here's the post I'm working on:
http://www.flippinlaw.com/what-is-sound-financial-advice.html
I've noticed the issue in 3 different browsers and it seems to be a bootstrap related style. Any help is appreciated greatly. Thanks!
Please remove white-space: nowrap; from code on bootstrap.css line #983
It is safe to disable your code { display: block; } too
Adding display:block to the code tag looks to work for me
code {
display: block;
}
Add it to your style.css file
edit
Note that will change it for every code tag on the site, so in case you don't want to do that you can either add it inline to that particular code tag (which isn't really the best idea):
<code style="display:block;"></code>
Or create a class for it:
code.code-block {
display: block;
}
<code class="code-block"></code>
I have a WP site that i am trying to pimp a little.
It will be a place to check out iPhone accesories and i want it to have the iphone look.
I have made a background that i am pleased with but i want to put the background picture over the whole page so the "frame" of the iphone lookalike thing i´ve done is visible all the time and the content of the WP gos under it when scrolled.
My wp is here:
http://www.metalagency.com
and the image that i want to be on top is here:
http://www.metalagency.com/wp-content/themes/twentyeleven/images/testdiv.png
The white section of the image is transparent so i want the wp site to visible in that area.
Am i making any sense here?
Sorry if it is a stupid q but i dont seem to find any answer anywhere on this.
I understand that i need to do some css styling but i am not sure where to put it.
Pls help a slow Swede....
Thanx.
//R
Bookmarklet preview: open your page, copy into location bar, press enter:
javascript:sa=document.styleSheets;sa[sa.length-1].insertRule('#page { background: transparent; height: 700px; overflow: scroll; }');
You should create a simple child theme first (if you don't want your modified twentyeleven theme overwritten by an automattic update): http://codex.wordpress.org/Child_Themes#The_required_style.css_file and put all your modifications there.
Sample style.css:
/*
Theme Name: myPhoney theme
Template: twentyeleven
*/
#import url("../twentyeleven/style.css");
#page {
background: transparent;
height: 700px;
overflow: scroll;
}