I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
Related
I'm new to Wordpress and having a hard time making it do what I want. I'm using the twenty-seventeen theme and it puts too much vertical space around the home page content. You can see what I mean here: www.tekknow.net
If I press F12 in the chrome browser and look at the elements containing the content, it goes from outer to inner tags like this:
class = "site-content-contain"
id="content" class = "site-content"
id="primary" class = "content-area"
id="main" class = "site-main"
id="post-30" class = "twentyseventeen-panel post-30 page type-page status-publish hentry"
class="panel-content"
class="wrap"
The inner most one is #7 so I've put that into the customizing additional css section like this:
.wrap {
margin: 0px;
border: 0px;
padding-top: 0px;
}
When I float my cursor over the wrap class in the chrome elements, I still see a lot of green padding above the text "HOME PAGE", yet I have set padding-top to 0. I've also verified that there is 0 border, margin, and padding in items 1-6. Suggestions?
If you wanted to remove the padding from the top then you will need to edit these CSS rules:
.panel-content .wrap {
padding-bottom: 0.5em;
padding-top: 1.75em;
}
#media screen and (min-width: 30em)
.panel-content .wrap {
padding-bottom: 2em;
padding-top: 3.5em;
}
#media screen and (min-width: 48em)
.panel-content .wrap {
padding-bottom: 4.5em;
padding-top: 6em;
}
You can also see that there is different styling for different screen sizes.
You could eventually add !important to:
.wrap {
margin: 0px;
border: 0px;
padding-top: 0px !important;
}
Hope it helps.
I´ll suggest you to write a new CSS file and save it under style.css
Presently, the .wrap class has a style of
padding-bottom: 4.5em;
padding-top: 6em;
which is saved under http://tekknow.net/wp-content/themes/twentyseventeen/style.css?ver=20190507
So, just write a new CSS file or edit the .wrap class files from there.
All the best!
I added Bootstrap to my project, but it seems like the headings sizes are fixed and can't be changed. I'm trying to change the font size of my project, as my h1 and h2 text looks really big on mobile devices. For some reason, when I change the font-size of h1 and h2 tags, it seems to be ignored, and when I inspect it, they have lines through the code that adjust the font-size. I tried adding media queries too, but it is not working.
Code:
h1{
font-size: 15px;
padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #E85A4F;
}
h2{
font-size: 17.5px;
}
p{
font-size: 15px;
}
#media only screen and (min-width: 576px){
h1 {
font-size: 20px;
padding-top: 25px;
}
}
The odd thing is when I adjust the paragraph font-size, it works fine. Is there a way I can adjust the heading font size in the same way?
The lines through the code mean, that the style is overwritten.
This image shows the font size of the h1 of the code below. As you can see, there are multiple styles for h1. The one that is displayed at the top in the style panel (image above) gets applied. (This is the selector with the highest specifity, if there are multiple ones with the same specifity the last of the last stylesheet gets applied). On the right side you can see the file and the line where the style is applied.
To solve your problem you can:
Remove the code in the file and the line that is overwriting your headline style
Use a selector with a higher specificity, in this case for example h1.headline.
Add important to your style (font-size: 30px!important;), Note that this is the easiest but dirtiest solution
h1{
font-size: 30px;
}
#media only screen and (min-width: 800px){
h1{
font-size: 20px;
}
}
/*
a lot more css
*/
h1{
font-size: 35px;
}
<div>
<h1 class="headline">Test</h1>
</div>
I have been struggling to find answers as to why this does this so I'd figured I'd post it here to see if anyone else knows this happens and if there is an explaination. Or maybe it is just a CSS/HTML bug I am unaware of.
I created the following jsfiddle for an example.
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
body {
background-color: #20262e;
height: 100%;
margin: 0px;
padding: 0px;
}
.title {
margin-bottom: 0 !important;
padding-right: 100px;
color: #ffffff;
font-size: 50px;
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
position: relative;
display: inline-block;
}
.title::after {
background-color: #f5a800;
width: 80px;
height: 4px;
content: '';
position: absolute;
top: 50%;
right: 0px;
}
<div class="container">
<h1 class="title">
This Is An Awesome Title
</h1>
</div>
Simple effect and works great as long as the H1 is one line. However, once you resize the screen and the H1 breaks to 2 lines, it seems that the behavior of the H1 changes? inline-block->block? If you inspect the H1 in devtools, it goes from having its "space" go from wrapping the text to full width when it breaks and the pseudo element is then pushed way out to the right of the screen instead of the right side of the text like it is when it is on one line.
I am all out of ideas on hacks around this, I've tried floats and flex to no avail.
Open to any suggestions on how to accomplish this, or maybe its a lost cause and I am stuck with changing font sizes and padding using media queries.
Thanks.
EDIT
Here are a few screenshots to further clarify what I am asking:
Text on one line: https://screencast.com/t/W83PxIck
Text when it breaks to two lines: https://screencast.com/t/Lx8xjHkrWx
Nope, that's the expected behavior. It is still inline-block. The right side of the block is the rightmost side of the text, not the right side of the final line.
If you're looking to place it immediately after the final line, you need to use display: inline, not inline-block.
You can view the boxes by using dev tools, which will clearly show you where they begin and end.
So I want to put a h1 tag in the bottom right corner. What I have currently is below; however, this is very tedious and I want it to always be in the corner. Currently the way I am doing it is based off of my computer's screen, but if someone uses a computer with a different size screen then the tag will not be in the right place. Would there be any other way I could do this so that the tag would be in the same place for all size monitors?
.subH {
font-family: Sedgwick Ave Display;
font-size: 10px;
padding-top: 505px;
padding-left: 1170px;
color: white;
}
<h1 class='subH'>Created by Hybrid Alpaca Game Studios</h1>
Use position: fixed
Example:
h1 {
position: fixed;
bottom 6px;
left: 6px;
}
So here's my problem:
Started working on a website and as the trend goes I went for responsive layout, using bootstrap (12 grid system). So I have to main elements in body which are a heading and an SVG path animation done with LazyLinePainter. So the problem I have is that the heading, is responsive, it stays in the middle no matter the size of the window, yet the animation refuses to do so. I've used same classes on both divs and can't come out with a solution to the problem so that's why I am writing here. I am posting both the html and css:
HTML
http://codepen.io/TresV/pen/bNNZjm.html
CSS
http://codepen.io/TresV/pen/bNNZjm.css
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
width: 31.5%;
display: block;
margin-top: -155px;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
Here's a life version:
http://thecodehome.tk/new.html
NOTE: Hosting is unreliable so it may not be up at all times.
Thanks in advance for you time and effort!