So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}
Related
please help me! i have spend 2 days to understand this condition :(
i found a website: http://www.wpbeginner.com, which have amazing widget icons in the sidebar lead to different pages.
then i tried to make something similar to it. i get their widget code.
<div class="guideicons">
Starting a<br>Blog
WordPress<br>Performance
WordPress<br>Security
WordPress<br>SEO
WordPress<br>Errors
Building an<br>Online Store
</div>
now i want to understand 2 things
firstly as you can see he added this tag at the beginning then
" class="guideicon starting". guideicon +icon name = icon and it's name which appears in the web page what he did to make it occur?
secondly the arrangement 2 columns each one have 3 icons how he did it it html5 through this simple code?
thank you so much
He has the width set to 47% in the class .sidebar a.guideicon. Because the width is set as 47% the width of the container, you cannot fit more than 2 icons across, so it overflows into the next row.
Open the developer tools and play around with the width. If you set the width to something like 10%, it will all fit in the same row.
Well if you inspect this sidebar you can see which class does what. In your case he uses the class guideicon to implement same style accros all the a tags in this sidebar with the rule .sidebar a.guideicon. And after that he uses the second class e.g speed to ad an icon whith the :before pseudo selector to add an icon from their icon pool with this 2 rules: content: "\f00b"; & font-family: Wpbeginner;. This is how Font Awesome was working(I am not sure if it still works like this nowadays).
If you want add you own icons like this you should just need to do something like this:
https://codepen.io/anon/pen/ZRJPEv
I hope i helped
I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
I have been working on my site for my store and have multiple pages with products arranged in a table. First column is a photo of the item followed by columns with item #, description, price, etc.. Currently I am writing code for each image resize "img height:, img width:" Is there code that would automatically do this for each image? I am trying to keep the width the same on all photos to keep the column the same but the height is usually different for each photo. I am just trying to keep them proportional. Just trying to figure out a way of doing this easier. I've tried many design-your-site websites but none offer subpages of subpages. Wesbite is www.fredstrainshop.com. "lionel.html" link gives a good example of what I'm trying to do. Thanks for the help.
You can create a class for each image and specify the width and height. In case you want to change height of some specific elements use id.
HTML-
<body>
<img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
<img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
</body>
CSS-
.train
{
border: 1px solid black;
width: 100px;
}
See this for inspiration - https://jsfiddle.net/0w0vkzst/
On another note, I just visited your website, please consider using classes and ids for arriving at a more modular design. You might want to brush your html skills, for that codecademy and w3schools are great sites.
I used this html line
style="width:100%;height:100%;"
The line won't work in my case because the scrollpane works a little bit differently.
But if I add this line:
<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>
it works
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
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%;