I'm building myself a website on SquareSpace and having a bit of trouble with the layout. I've built a few sites before so understand the concept of CSS, and how it's applied to divs etc...
So, I want the page to have full width images (edge to edge in the browser) interspersed with text and graphics.
The banner image and footer image look good, as you can see the image is edge to edge...
The problem is with any additional images I try to add (SS makes you add them inside 'image block' objects), currently it looks like this which is bad, and not edge to edge, shown here with red arrows...
I have spent hours googling about, and testing various solutions and nothing works. I also spent the last 30 mins with SS support and they suggested making a 'gallery page' which you can't add text to so that's totally pointless!
I tried to identify the CSS ID and apply CSS to the image, that didn't work either:
Can anyone help?
current CSS not working:
.sqs-block.image-block { padding: 0 !important }
body {
margin: 0 !important;
padding: 0 !important;
}
Cheers
John
I didn't find a programmatic solution to this hideous problem.
However, I was able to figure out a way to manipulate a SS 'index' style page to achieve the effect I was looking for.
Related
I've read through every SO question and article I can find on the topic and have tried every suggestion, but nothing has made any difference. I just need to print webpages like this one on mlb.com without cutting things in half at the page breaks. It might seem trivial but it's for someone who has been wrongfully imprisoned and can't do anything but sit and read for the next few years (and is a huge baseball fan), so any help would really be appreciated and make a difference.
I've tried many variations of the following, which I inserted at the bottom of the webpage's body (I also tried the bottom of its head) using Chrome's (and Firefox's) developer tools:
<style type="text/css">
#media print {
.view-header, .action, .pitches-exist {
break-inside: avoid !important;
break-before: auto !important;
overflow: visible !important;
float: none !important;
display: block !important;
position: static !important;
}
}
</style>
But when I tell the browser to save/print a PDF, things are still cut off at the bottom of every page like this:
Is there any good solution to this or will I need to try to find some hack that involves changing the absolute positions or margins of elements? Of course, that wouldn't be ideal, especially since I'm not a web developer. Thanks in advance for any help you can give.
Notes:
Please don't share any ideas that you haven't tested yourself and found to work on this particular webpage.
I'd prefer a solution that works in Chrome but would gladly settle for one that works in another browser.
indeed you add a bigger paper size in System printer setting
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
I'm using drupal (jollyness) theme and I am hosting a mock up site at seosolutions.london
I have been trying to see if there is a css work around to either "prevent my calendar displaying more than one month at a time" OR "to hide any extra months from view"
I have tried playing around with the widths of the various container divs (using chrome developer) but nothing seems to make a difference.
does anyone have any suggestions please?
Try adding this to your CSS file:
.cal-viewport { width: 220px !important; }
Although you should refrain from using !important in your CSS, it is needed in this case (as inline styles are being applied).
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p> tag is causing it, but I don't see anything in the css that should make it this wide. What am I missing?
The page is wide because of the <pre> elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%