tldr: I want to create simple theme, based on 2 columns with just pictures, that fill the whole screen, like this - http://half-way.precrafted.com/
Hello.
I started learning html/css yesterday, because i want to create rather simple theme that would fit my needs.
However, it turned out to be harder than i thought, unfortunately.
I post only pictures, without any captions or tags. All i want is theme based on 2 grids, where whole screen is occupied with pictures (except header on top). This is the best, almost exact example of what i want - http://half-way.precrafted.com/
However, the issue is that tumblr allows photoset with maximum width of 700px. This may be overriden with javascript - and i found such scripts, but it uses fixed values, so it won't really fit to any screen - just mine.
Set the photosetrow class to:
<div class="photoset_row photoset_row_2">
The CSS for this:
width: 400px;
white-space: nowrap;
overflow: hidden;
margin-top: 10px;
.photoset .photoset_row .photoset_photo:first-child {
margin-left: 0 !important;
}
.photoset .photoset_row .photoset_photo {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
I literally pulled that CSS from looking at the source code of that page you posted.
It seems the most important one is the photoset_row_2
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.
On my site I am using the theme Newspaper. I have modified it a bit with css. I am trying to get my sidebar (instagram, most popular, newsletter sign up) to have a width of 26% so it would be on the same row as the editor's picks.
The problem is that I can not get the sidebar to have a width of 26% without affecting the 3 blocks above editor's picks. Since both of them are .td-pb-span4. I have tried to solve this issue by using a more specific code just for the sidebar (code down below) and it still will not work. It is weird because the code I am trying to use will apply in chrome developer, however once I add it to my css it doesn't apply to my site. I would really appreciate any solution, I have been trying to figure this out for a few days and can't seem to find the problem.
code I first tried to add but it affected both the sidebar and the 3 blocks above editors picks (and I only want width:26% to apply to the sidebar)
.td-pb-span4 {
width: 26%;
}
more specific code I am trying to add that only applies to the sidebar (it will work in chrome developer, but will not work if I apply it to my site css)
.vc_column.td_uid_70_5976097f07941_rand.wpb_column.vc_column_container.td-pb-span4 {
width: 26%;
}
Don't do this:
/* index ~line 2817 */
.td-pb-span8 { /* WHY */
width: 70%;
float: left;
margin-right: 4%;
}
you're touching a well defined grid system that has to work out of the box:
.td-pb-span8 {
width: 66.66666667%; /* yep. There's no reason on earth you should set to 70% */
}
Grids are 12 based so do the math: 100 / 12 * 8
I'm doing a website and I would like to use one of the font awesome icons to go across the whole screen to use it as a section separator.
I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes... not sure if it's even possible, any ideas?
You can use this site to convert icon to png and then use that img as background and set background-repeat: repeat-x
div {
background: url('http://i.imgur.com/qkXOkZZ.png');
background-size: contain;
background-repeat: repeat-x;
height: 50px;
}
<div></div>
I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes...
Well it doesn't have to be, if you just one element, full width and with the overflow cut off.
In fact, I would recommend to not copy the default HTML snippet for the icon multiple times into the document - but rather use a single one, and "extend" that via an additional class, so that the generated content character is repeated multiple times:
<i class="fa fa-pied-piper fullwidth" aria-hidden="true"></i>
.fa-pied-piper.fullwidth {
display: block;
width: 100%;
white-space: pre;
overflow: hidden;
}
.fa-pied-piper.fullwidth:before {
content: "\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae...";
/* repeat as many times as you consider necessary
to fill "a whole page's width" */
}
https://jsfiddle.net/g8hefymq/1/
This is a simple solution for a single specific icon, assuming you need only one (or maybe two, three ...) - if however you would want this to work for "just any" icon fontawesome offers, a different solution might be needed. If multiple specific icons that are going to be needed could be picked in advance, you'd might want to use a CSS pre-processor like LESS or SASS to at least create the above, repetitive CSS for the icons' content properties via a loop or something like that.
In today's web development community, It is almost 'standard practise' to make a website "fully responsive" - meaning it would work on all screen sizes.
I currently have a website that is designed for a set width and height of 900 * 600px. However, I would like to alter this in such a way that I can make it mobile responsive, without loosing its functionality.
I was looking for some 'industry standard' concepts in which I could adapt to this purpose, although I am at a slight loss as to how 'professionals' would go about achieving this in real world situations?
+---------------------------------------+
| NAVBAR (900px) |
+---------------------------------------+
| | |
| | |
| | body |
|200px | (700px) |
| | |
| | |
| | |
| | |
+---------------------------------------+
Here's a quick demo of a layout design which suits the 900 * 600px screen:
.page-wrap {
height: 600px;
width: 900px;
background: lightgray;
position: absolute;
top: 0;
left: 0;
}
.nav {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 900px;
background: tomato;
}
.sidebar {
position: absolute;
top: 50px;
left: 0;
height: 550px;
width: 200px;
background: dimgray;
}
.nav a {
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
text-decoration: none;
background: rgba(200, 200, 200, 0.4);
}
.nav a:hover {
background: transparent;
}
<div class="page-wrap">
<div class="nav">
nav bar itemnav bar itemnav bar itemnav bar itemnav bar item
</div>
<div class="sidebar">
</div>
</div>
In short, how would this 'responsive' design be constructed? Is there a 'best practise' when dealing with responsive-designs?
there are many ways in order to make a website responsive. It bottles down to so many factors.
You need to use RWD, which stands for Responsive Web Design.
It means that you can deliver your webpage in a variable size of screen, without having to re-write your html over and over. This is very much a must-do if you had to work with mobile and/or tablet devices.
Use Dynamic Units
One of the most important features of making a webpage responsive is the units you use, so I'll mention that first of all. At the moment, you have 'hard coded' these values by using a (pixel) px unit, which would be seen as a 'static unit'.
Below is a couple of units you may want to consider in the generation of your markup:
The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known. The absolute units consist of the
physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org
The above table displays what is known as 'absolute' units, and this is because they do not 'technically' change when you resize your browser or view on a mobile device.
Instead of using such units, you should consider using one of the 'dynamic' units. For example:
percentage (%)
viewport-width or viewport-height (vw and vh respectively)
~Image from this article note this is an old article, and support for these has improved a lot since
Using the likes of percentage, for example, means you can set the width and/or height of a div depending on your containing block's size.
For example, resize your screen here:
div {
width: 50%;
background: tomato;
height: 50px;
}
<div></div>
You should notice how that div will always be '50% of its container'.
This would become very handy if you were building your website from scratch, but would also be useful if you were adapting one as well.
Use Media Queries
Media queries are great when used properly.
A media query is a logical expression that is either true or false. A
media query is true if the media type of the media query matches the
media type of the device where the user agent is running (as defined
in the "Applies to" line), and all expressions in the media query are
true.
A shorthand syntax is offered for media queries that apply to all
media types; the keyword ‘all’ can be left out (along with the
trailing ‘and’). I.e. if the media type is not explicitly given it is
‘all’.
For example, you could test something like "if my screen is smaller than 500px, use this css instead".
This would use a definition of something like:
#media (max-width:500px) {
//my css for when screen is lass than 500px wide
}
Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND
A simple demo of this would be:
div{
width:500px;
height:200px;
background:gray;
}
#media screen and (max-width:500px){
div{
width:100px;
background:tomato;
}
}
<div></div>
Use a Responsive Plugin
(Personally not advised, but still valid)
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive webs.
Although I would advise not to using this, as it has a lot of 'unnecessary' css rules and hence I think it should only be used for 'concept code', and not production code.
Other Frameworks include:
foundation 3
skeleton
Bootstrap
Use a combination of these
In reality, most developers would use a whole range of combinations of these.
There isn't really a 'definitive' way of making a website responsive. However, hopefully you will be able to use some of this in future.
I've recently found that for responsive images I had to ensure that images in a Jekyll site (porting a template and adding functionality) would scale and fit on smaller screens, but not stretch and take up half the screen on screens with larger sizes.
Here are 2 methods to ensure that images/media do not overstretch or mess up the entire responsive site by going through the boundary without having to manually resize them.
CSS max/min-width attribute
For media assets like images, most browsers will support the max-width attribute that specifies how wide the image can be, or max-height if your use case prefers that. Here's an example:
/*in a css file */
img {
max-width: 90%;
height: auto;
width: auto;
}
That tells the browser to display images at a maximum width of 90% and resize the width and height accordingly (you do not need both attributes). For all img elements.
For even finer control individual styling of classes can be done like so:
img.responsive {
/*css for specific class here*/
}
And later specify the element is part of the image responsive class like so:
<img class="responsive" src="/assets/pic.png">
EDIT:
Centering or Positioning in CSS
I found a simple website that generates the code on how to position elements in CSS for you based on input settings, which is a real issue on responsive devices as well. This is the website: http://howtocenterincss.com/
Note that you will need to fully fill everything in (including the middle option). Also, despite the website's name, it also handles positions that are not center as well, so it is a fairly good catch-all.
Wrap the image in a container
The benefit of this is you style the container, and every element inside it will adhere to the container styles if their attributes are auto. By specifying a max size for a container with width=800px, whilst making the image width: auto so the image will resize to the dimensions of a container.
These 2 examples are adapted from the following site, which is a great resource for handling responsive assets like responsive videos/images/fonts and relative sizing, 5 useful CSS Tricks for a Responsive Website. The author is much more well-versed on the topic than I am currently.
Note that as mentioned in that tutorial not all browsers support max-width (IE7 and 9 do but not IE8) so that might be an issue for some people who use outdated browsers. In that case a conditional CSS is needed of a hack such as below (example taken from site) is needed:
#media \0screen {
img {
width: auto; /* for ie 8, */
}
}
-- Notice how I just placed width:auto in my first example with the max-width attribute
Additional: Another Framework
Many templates made by web designer n33 employ the lightweight Skel framework to make responsive websites that load the right CSS based on screen size. However this is a Javascript framework which won't function when users have noscript turned on. In which case you have to load the CSS by specifying <noscript> paths to CSS here </noscript>
A good reference on responsive templates (that have opensource files like CSS) that allowed me to study and understand some methods in making a responsive site can be found at HTML5UP.net also by the same developer that wrote Skel.
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%;