Good Morning.
I would like help with the TinyMCE editor that I am trying to integrate into my blog.
[I would like to remind you that I'm a beginner]
The problem I've been encountering is when viewing the blog on cell phones, as the images don't fit the screen, breaking the view.
view of the problem -
At the bottom, in gray, would be the page border.
In the search for solutions, I found this (but as you can see, it didn't solve the problem)
In tinymce.init:
image_dimensions: false,
image_class_list: [
{title: 'Responsive', value: 'img-responsive'}
]
can anybody help me?
it looks like this is your first post? Welcome!
My assumption is that the img-responsive CSS class isn't setup on your site properly. You probably need to setup the class on your site similar to:
.img-responsive {
width: 100%;
}
Please have a look at this Codepen as an example. You can change the width of small-element in the CSS and the image will be responsive.
Alternatively, when you insert the image in TinyMCE, you can specify the image width as 100%.
I tried to adjust the img-responsive properties, but I have a bootstrap theme and I'm not sure where it is adjusting those properties.
After a more cautious review of the documentation, I was able to "resolve" this problem as follows:
In tinymce.init({...
style_formats: [
{title: 'Imagem responsiva', selector: 'img', styles: {
'width' : '100%',
'height': '100%'
}
}
]
This created an option for formatting to be applied.
Solution I got.
That way I was able to have responsive images without breaking the page layout when viewed on mobile devices.
Thanks to anyone who can help.
Related
I made a simple change on my Squarespace site today, and for some reason my images on one specific page are not loading anymore. I've tried different browsers, and clearing my cache, but the image won't load and nothing has changed. Any idea what I can do to get to the bottom of this?
If you follow this link you will see what I'm talking about, and image will load for less than a second and then disappear. If you don't see it, try refreshing the page.
It appears that you are applying some custom CSS to the page in question, likely via per-page code injection. The following code is appearing on that page:
<style>
.sublogo {
z-index:1000;
position:fixed;
top:20px;
left:35px;
}
.thumb-image.loaded {
display: none !important;
}
</style>
It is the second rule, .thumb-image.loaded {...} that is causing the image to disappear once it is fully loaded.
Removing that rule should solve the issue. Of course, you'd need to consider why the rule was added in the first place and what other issue it was put there to solve.
I am currently working on customizing the welcome page for my Bigcartel site.
I am using the Neat theme and would like to remove the grid filter that appears over the slideshow image1 to appear clean image2
I was wondering if it's possible in Big Cartel and what was the process to follow?
To remove the grid, you'll need to drop the following code into the bottom of the CSS section in your Customize Design area:
.slideshow div.featured_holder {
background: none;
}
add this in your css
.slideshow .featured_holder {
background-image:none
}
Implemented a Kendo Grid exactly as stated in the examples.
Here is the pager in the example:
Here is my pager:
Notice how the arrows are right at the top of the buttons.
Why is it like this? I thought if you install KendoUI that everything should work well out of the box?
I have tried this in Chrome, Firefox and IE and the same results.
Does anyone know how to fix this?
The worst part is the refresh on the right hand side, it's completely out of alignment to the item count next to it.
I have even tried a fresh install on a new solution and that did not fix the problem either.
Can someone please help me? Is there perhaps more steps to install Kendo UI properly?
I had this similar problem some time ago. After searching problem I found out that I didn't have doctype on my page.
<!DOCTYPE html>
My page had DOCTYPE html, however the declaration was set to transitional. I removed this and it worked. It also works if you set it to strict.
http://www.w3schools.com/tags/tag_doctype.asp
This misalignment issue is occurring due to kendo icon property which is set to super.
To resolve the issue, we need to set this to middle
.k-icon
{
vertical-align: middle;
}
Include above property in inline css of that page.Like we need to include this into <style> </style>tag.
I have a recapture form field added through userforms module for Silverstripe. And if you look at http://www.ct.com.au/contact you will see the captcha form looks quite messy.
Using Chrome debugger I noticed that the captcha is adding an extra <tr> field and I've looked everywhere and have no idea how to get rid of it.
Please help!
The reason it looks so messy is the height of the captcha input that it inherits from your page css pushes out the box height. We need to reset the height of this input field.
Add the following to your css:
.recaptchatable #recaptcha_response_field {
height: auto;
}
I use Tumblr as my website for my band. I'm working on the discography page and I'm trying to put album artwork into a page at a 240px by 240px ratio, but it's stretching and I'm not entirely sure how to stop it from doing that.
Link to page
Any help would be greatly appreciated. Thanks.
Go to your blog customize page. It should look like this: tumblr customization panel http://img109.imageshack.us/img109/803/0a8e2d3f8a7e402ca707c5c.png
Find field “Add custom CSS” and paste in it this code: #entry img { width: auto; }