I am making a template to a website, and have a final problem that I can't solve.
Two of the pages ("Bliv medlem" and "Kontakt DJK") seems to have a max width to the (main)content module. The only thing I've coded is the UI-kit "uk-width-1-1#s uk-width-4-5#m" classes. I have looked at all the classes and attributes I could see affected the modules, but I haven't been able to find anything.
On the page "Bliv medlem" the div tag containing the "content" module seems to have a max size of 1203.980 px. On the page "Kontakt DJK" the same module seems to have a max size of 891.656 px.
The website I'm making a template for is http://djk.limfjordsbanen.dk/index.php?option=com_content&view=category&layout=blog&id=8&Itemid=103&lang=da (at the moment only in Danish).
I am using the 3.9.16 version of Joomla and UIkit version 3.0.0-rc.2.
I believe the reason is because of the actual content you have on some of the pages.
If you have full-width paragraph text on http://djk.limfjordsbanen.dk/index.php?option=com_content&view=article&id=20&Itemid=128&lang=da you'll see that the 'content' module is wider (please see attachment 1)
Or alternatively, if you CSS hide the unordered list on http://djk.limfjordsbanen.dk/index.php?option=com_content&view=article&id=4&Itemid=112&lang=da the width of the 'content' module decreases. (please see attachment #2)
Good luck, I hope this helps!
Related
Amongst other wiki-pages Arduino#Official_boards - Wikipedia the <gallery mode="packed">thumb for Adruino_Nano.jpg has a caption that is so narrow that it breaks on the word "Nan<br />o".
I know I could rotate the image but, I'm asking if there is a way to force a minimum width of a thumbnail possibly via some css-style padding if yes then the MediaWiki gallery page needs to mention what are the acceptable styles and, if not then. Where should I request any new gallery parameters or should I file a bug report on phabricator? or ¯\_(ツ)_/¯
In CSS you have the property min-width.
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
Hi I have an odd problem with woocommerce product images sometimes omitting the width and height declaration as you can see on https://www.tidybedrooms.co.uk/product-category/hinged-door-wardrobes/.
Looking at the top row of images on that page you will see that the 1st, 2nd and 4th images are displayed mush larger than the 3rd and 5th. The images i have uploaded to WP are all the same dimensions, and the only distinction i can make when viewing source of the correct vs oversized images is that the oversized images omit a tage for width and height, where the correct images do not.
Has anyone experienced this issue, or know how i can resolve it.
Thanks!
It appears that for some reason, the larger images are being displayed as base64 data instead of URLs by default. It is interesting that occurred. Perhaps you can work out why by retracing the steps you used to insert the images for these products vs the others.
As for a quick fix, you can add the following to the theme's custom stylesheet:
.attachment-shop_single {
max-width: 100%;
}
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.