I have this two snapshot: http://snag.gy/uq7on.jpg (desktop) and http://snag.gy/8rg6n.jpg (iPhone 5). I don't know what to do to have the same structure on both, as you can see the paragraph "En ovra afrontamos ..." goes down..
Here is the site: http://www.ovra.es
This is the code of the paragraph:
p {
line-height: 21px;
font-size: 15px;
font-style: normal;
padding-right: 45px;
}
I believe there are many answers to your question. Here's mine:
Add the following CSS for the .der element:
body main section.razones .der {
float: right;
width: 50%;
}
Then remove the margin-left property from the .izq and add it to the .bocadillo and the ul:
body main section.razones .izq {
float: left;
width: 50%;
}
body main section.razones .izq .bocadillo, body main section.razones .izq ul {
margin-right: 40px;
}
Related
I am learning about CSS from Progate.com (Note that they don't have any doubt clearing forum) and reached the level where I have to work on a simple layout provided in the exercises. It was quite a smooth learning until I was confused by the CSS of a class selector. So, I need to fix some CSS so that only the <li> elements inside header-list are horizontally aligned.
To do the same I changed the code to the following:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
float: left;
padding: 33px 20px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
This gave me the same result as they wanted in the answer. But, when I try submitting the answer, a popup pops out saying that
The CSS for the float property of <li> elements should be deleted.
So, to understand why this was needed, I re-read their instructions once again and it stated that:
Rewrite the following properties specified for <li> elements so that they are applied only to the <li> elements inside header-list.:
float: left;
padding: 33px 20px;
Thus, here I am confused why it is that much necessary to write the code as follows in order to advance myself to next stage:
body {
font-family: "Avenir Next";
}
.header-list li {
list-style: none;
/* CSS properties from here are moved to line 32. But why?
We still get the required result without doing so.
*/
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}
.header-list {
float: left;
}
/* Added -> CSS for <li> tags within header-list
(CONFUSION: The float and padding property could have been applied in the first .header-list li{}.
But I didn't understand why the same has been told to do again below)
*/
.header-list li {
float: left;
padding: 33px 20px;
}
.main {
background-color: #bdf7f1;
height: 600px;
}
.footer {
background-color: #ceccf3;
height: 270px;
}
I searched over the internet in order to get some clue about the same. But I think, being a beginner it is very hard to clear the smaller concepts. Hence, I took it to our saviour forum - Stackoverflow. Some help or hints about the same will be greatly appreciated.
You may want to try using display: inline; instead, and deleting the floats. You stated above that they mentioned
The CSS for the float property of <li> elements should be deleted.
This is another way of of displaying your list horizontally without using floats.
Hope this helps!
I highly recommend checking out The Net Ninja on YouTube though. He is an amazing teacher, you will learn a LOT, and he is very thorouhg and makes it really easy for you to grasp the concepts. Check out the playlists on his channel he has some for html, css, and a ton more!
https://www.youtube.com/watch?v=I9XRrlOOazo&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
On my wordpress site I use List category post plugin.
This is html code:
[catlist name=Ostatné numberposts=50 name_class=velkost
catlist thumbnail=yes force_thumbnail=yes catlist thumbnail_size=200,150 thumbnail_class=lcp_catlist
excerpt=yes excerpt_size=10 excerpt_class=moj_excerpt]
And this is CSS code:
.shrtthumbsd{
margin-bottom: 50px;
}
.shrtthumb {
float: left;
margin-left: 50px;
padding: 55px 15px;
display: inline;
width: 100%;
}
ul.lcp_catlist {
font-size: 22px;
}
.moj_excerpt{
font-size: 18px;
}
And it looks like this: https://www.akosizarobitpeniaze.sk/vsetky-clanky
I would like to align picture to the right side and have title of article (without bullet/dot) and excerpt under title.
Add this CSS to your site.
.lcp_catlist li { list-style: none !imporant; }
.lcp_catlist li img { margin-right: 0 !important; }
I wrote the hover pseudo-class for all input and label elements as shown in the image ,but when when I hover my mouse on one label the other indent directly to the right
Preview
The code is shown:
<Style>
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display:inline-block;
}
label[type:checkbox]+[type:radio]{
width: auto;
input:hover { font-size:25px }
label:hover { font-size:25px }
</style>
First of all, you should make clear that your markup is valid. As already mentioned in the comments, you forgot a curly brace { for your label[type...] descriptor.
To avoid the shifting of other elements on hover, you should make clear, that the hovered label height doesn't become greater than the height of the input element next to it. Therefore the line-height of the label and the height of the inputs should at least be 25px.
Since you haven't provided a Minimal, Complete, and Verifiable example the exact code is hard to guess, but the following should work:
input {
height: 25px; /* <- */
}
label {
width: 180px;
float: left;
text-align: right;
margin-right: 0.1em;
display: inline-block;
line-height: 25px; /* <- */
}
label[type:checkbox]+[type:radio] {
width: auto;
}
input:hover {
font-size: 25px
}
label:hover {
font-size: 25px
}
I'm trying to create a responsive layout, but for some reason, when I wrap the relevant CSS in a media query, it isn't recognized: i.e., if I resize my browser window or check it out on my iPhone, the CSS is not applied. I'm not sure what I'm doing wrong here. Here is the relevant code (note that I'm working with the Types plugin within WordPress, hence all the bracketed stuff):
HTML
<div class="client-stats">
<h3>Stats</h3>
<p><strong>Event Date:</strong> [types field="date-of-event" style="text" format="F j, Y"][/types] </p>
<p><strong>Event Type:</strong> [types field="event-type"][/types]</p>
<p><strong>Special Effects:</strong> [types field="special-effects"][/types]
<p><strong>Equipment Used:</strong> [types field="equipment-used"][/types]</p>
</div>
<div class="client-description">
<div class="portfolio-description">
[wpv-post-body view_template='None']
</div>
</div>
CSS
.client-stats {
width: 325px;
float: left;
margin-right: 15px;
padding: 0 7px 0 35px;
background-color: #333;
background-image: url('/wp-content/uploads/2016/05/paper-1.jpg');
min-height: 350px;
line-height: 1.5;
color: #fff;
}
.client-stats p, strong, h3 {
font-family: "Courier New",monospace;
}
.client-stats h3 {
text-transform: uppercase;
margin-bottom: 20px;
color: #fff;
}
.client-stats strong {
text-decoration: underline;
font-family: "Courier New",monospace;
}
.client-description {
margin-left: 350px;
}
#media only screen and (max-width: 768) {
.client-stats {
width: 100%;
float: none;
margin-right: 0;
}
.client-description {
width: 100%;
margin-left:0;
}
}
If I remove the media query wrap, the CSS is applied fine (so it's not the CSS rules, specifically that are the problem).
The relevant page is here, if that helps: http://107.170.41.117/client/client-6/
#media only screen and (max-width: 768) {
CSS lengths require units. 768 is not a valid width.
This would have been picked up if you had used a validator.
I have the following page http://jsfiddle.net/Leytgm3L/18/ and as you can see there are 6 links to different cities. I put a following css:
.cities-main li {
float: none;
display: inline-block;
text-align: center;
margin-right: 10%;
list-style: none;
text-transform: uppercase;
font-weight: 400;
font-size: 18px;
}
to spread this list horizontally, but the problem is that it's not center inside the main div... How can I do that?
In order to center your list of cities, simply apply the following to your ul:
ul {
text-align: center;
}
Try adding these rules:
.cities-main{ padding: 0; text-align: center; }
.cities-main > li:last-child{ margin-right: 0; }
By doing so, the last link won’t break into a new line due to its margin-right. Also, the first link will be on the left border of its parent element. And altogether their centered.
Here’s a fiddle with it: http://jsfiddle.net/04z3L5gs/
Well , usually centering elements depends on the dimension of the element.
Try to gradually change the left and right margins , so that it is located where you want. That for the code you have right now.
But I recommend that you use:
.cities-main li {
float: none;
display: inline-block;
text-align: center;
margin-right: 10%;
list-style: none;
text-transform: uppercase;
font-weight: 400;
position: relative;
left: 50px;
font-size: 18px;
}
Modifies magnitude of element "left:50px" until you're satisfied.
Also consider whether you should use "margin-right:10%"