I'm trying to figure out a way to make a page go full width (I'm using Drupal 7).
The page has an embedded form on it.
Previously there were two blocks, which when I removed I'd hoped the iframe would fill.
Current iframe
What I'm trying to achieve
How do I go about this? - Link
You should edit your theme's style.css file and remove the following lines (line 481):
#right {
display: block;
float: right;
width: 740px;
}
You still have an extra block in the left region (region-left-sidebar).
Related
I'm having a problem in the mobile version of my desktop. It's an edited versione of the classic theme for prestashop 1.7.6. Here's a link to the website.
In the footer, I have 2 consecutive divs, each one with its content. The first div has the block_myaccount_infos ID, the second one has the block-contact class.
The first div has a custom JS which should display the dropdown content, similar to the two sections before that. Since I noticed that the JS wasn't being executed, I used the chrome inspector tool, and I found out that the second div is overlapping the first one.
I tested adding a tag inbetween, which works, but it's not a valid solution to me since i need the two divs to be on the same line in the desktop version.
I see that you have
#media (max-width: 1025px)
#footer #block_myaccount_infos {
width: 34%;
display: inline-block;
float: left;
in your css. The issue is caused by that float: left;
If you alter or removed that and the <br> in your HTML, it should fix your issue. Hope that helps.
I created a div in my a web site so that the text on the page is neatly contained to a set width. I've also implemented CKEditor5 and am using it's CodeSnippet plugin. When there is too much code on a line, it creates a scrollable box with the text overflowing in that scrollable part (behaviour that I actually desire!). However, the background does not exert that same behaviour so that it looks quite unreadable as you can see in the picture below.
I am quite new to building websites so I don't actually know where to start, Should look into the HTML or do I need to set some configuration in CKEdtior?
https://i.imgur.com/X5FXyGU.png
Cheers,
I found that the issue only arises when I apply a custom style like monokai-sublime.css.
adding
overflow-x: auto;
to
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
in monokai-sublime.css fixes the issue for me.
This is a relatively small project that I've been working on however it's driving me insane...
I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.
The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.
I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.
This is what my original website looks like:
http://i.stack.imgur.com/sxfeg.png
(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e
Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.
So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png
^ This is important in my problem.
When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)
However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.
#main_container{
width:977px;
background:url(center_bg_repeat.gif) repeat-y center;
The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png
Have I got the syntax wrong? Or what is wrong with my code?
I've placed all the images in the same folder as the CSS file for
convenience.
Is this a problem with Visual Studio 2013 or am I doing something
fundamentally wrong?
Is there perhaps another way to port this same design without
causing so many problems?
I'm not entirely clear on what you want to achieve but if it is the same layout as your original site, then it is better to replicate the html and css exactly first to get it working then look at restructuring or refactoring the code. For example, check that all element sizing is the same so that content displays as you expect.
There are a couple of key differences between your original and new code that could affect the behaviour in the new version of your site. In your original css you don't have a repeat style for center_bg_repeat.gif. Also, it looks like #main_container isn't referenced in your original code.
Repeating a background image won't cause content to repeat across the page. You are already including your content in your new html so you just need to use positioning (e.g. floats vs relative/absolute positioning) to get the tiles to layout in the way you want (see code snippet for an example).
html, body, .container
{
height: 100%;
min-height: 100%;
}
.tile {
float: left;
width: 20%;
height: 30%;
margin: 10px;
padding: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tile">first</div>
<div class="tile">third</div>
<div class="tile">second</div>
<div class="tile">fourth</div>
<div class="tile">last</div>
</div>
In your case, if you want #main_container to scale to fit the content then set its style to min-height: 100%;
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com
I used the css custom manager to change the min-height for my WordPress site. The site has way too much blank space at the bottom.
When I changed the min-height it is only applied to the home page.
How do I get it to change for the rest of the pages?
I was told that I would have to make a child theme in order to get the manager to apply it to all pages.
Doing so is not possible for me.Is there any other suggestions?
campwhiskers is the site (somehow the blog page is okay too?)
This is what I put into the manager to get the page to change:
#main .content, #main .last-content
{
min-height:auto;
padding-top:50px;
position:relative;
clear:both;
}
#main .last-content
{
min-height:auto!important;
}
If you mean "much blank space at the bottom", the copyright section then
In style.css, at line 122 - copyright {
margin-bottom: 70px;
modify margin-bottom:
to lower value like 10px;
Your height on the other pages is being controlled by this property, which is on line 117 of your CSS:
#main .content, #main .last-content {
min-height: 1700px;
padding-top: 50px;
position: relative;
clear: both;
}
There is another instance of this on line 59, which is where the confusion is.
Just delete this part of the CSS on line 177:
min-height: 1700px;
Here's a visual
Here is another screenshot. This one shows the css files your theme is using. You need to track down this file on your Bluehost server and delete the min-height part. I can't tell you how to find it though b/c I can't see your server. It's likely in the themes folder. If you paid for this theme, you can maybe get the author to guide you (or not). I think if you dig around, you'll find it though.