I wonder how to make a highslide thumbstrip scrollable for cases when there are too many thumbnails to fit into it.
I've got a highslide gallery here: http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html
However, the thumbnails in it get oblated so that all of them fit into the thumbstrip. Instead, I want them to keep the aspect ratio and to make the thumbstrip scrollable, just like here: http://www.roadrash.no/hs-support/gallery-in-page+caption-above-thumbstrip.html
It seems that my code is identical to what is in the example page, but for some reason the output is different.
Could please anyone help me with it?
Thanks.
Bootstrap's CSS (bootstrap.css:101) is clonflicting with Highslide, add this to your CSS
.highslide-thumbstrip-horizontal img
{
max-width: inherit;
}
Your own CSS is colliding with the Highslide JS CSS. In the bootstrap.css file, lines 101 and following, you have this:
img {
...
max-width: 100%;
...
}
Remove that max-width attribute.
Related
The size of the image is only 15x15. when i put in in wordpress. it automatically large. i want the default size. every image i put in wodpress is getting larger. even though I dont have any code to make it large.
here is my code:
<img src="http://mainvasdaq.compy.global/wp-content/uploads/2017/12/Square_ble_Right-1.png" style="width"50%;" />
Looks like there is a typo in your inline styling:
<img src="http://mainvasdaq.compy.global/wp-content/uploads/2017/12/Square_ble_Right-1.png" style="width:50%;" />
General format of inline style is as follows:
style="attribute:value"
Be aware of the : between attribute and value in above syntax.
More info could be found in w3c or in MDN
There is css written as
.dt-header-image img {
width: 100%;
}
in your style.css line number 1846.
Please comment that or add below css
.dt-header-image button img {
width: auto !important;
}
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.)
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%;
}
I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.
The Google+ button seems to automatically generate a div with inline CSS styling:
<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">
I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:
div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:
http://www.canadianoutback.com/events/crime_investigators.php
Your CSS selector should be:
.google_plusone_iframe_widget {width:auto !important; height:auto !important;}
Remove that [style] attribute in your selector, and there's no need to specify the div tag.
Try to add this code #leftNav .addthis_toolbox .google_plusone_iframe_widget {width:auto!important; height:auto!important;} to make it.
Could please try this once #leftNav a.addthis_button_google_plusone .google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Please do try with this
#leftNav a.addthis_button_google_plusone.at300b .google_plusone_iframe_widget {
width: auto !important;
height: auto !important;
}
If it is inside iframe we can't apply any style or script for it.
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>