responsive CSS & black/grey outline in Visual Theme

ovnigraphic · Member · Apr 4, 2014 at 12:21 am
Copy link

Add topic to favorites
Hi
I have a kind of black and grey outline around the post area…. How could I get it out ?
-When I look at the tablet and mobile version, the banner is deformed, get narrower but not less high. Is there a way to solve this ? Like making it responsive to the size of screen ?
-Up to now this what I’ve done with it….
Use CSS coding for the green gradient background and resize it this way :

.site-header img {
height: 129;
}

.site-header {
background: url(http://ovnigraphic.files.wordpress.com/2014/04/footer4.png)
}

.site-header {
height: 129;
}

.site-header img {
margin-top: 0;
}

Then I add a transparent image through the regular way…

The blog I need help with is
ovnigraphic.com
Thank you

The blog I need help with is: (visible only to logged in users)
cousett · Member · Apr 4, 2014 at 1:19 am
Copy link
I would set the width of the image to 100% and remove the other styles except the needed styles.
```
.site-header img {
/* display: block; */
margin: 1.5em auto;
width: 100%;
}
```
Then create a min-height and overflow rule in the .site-header .section style
```
.site-header .section {
margin: 0 auto;
max-width: 1020px;
padding: 0 30px;
min-height: 129px;
overflow: hidden;
}
```
Let me know if this works.
ovnigraphic · Member · Apr 4, 2014 at 1:45 am
Copy link
HI,
Thank you, it works.
It’s reducing the image i upload via the regular baneer fonction, still the gradient background I input this way

.site-header {
background: url(http://ovnigraphic.files.wordpress.com/2014/04/footer4.png)
}
is not adapting, it’s too wide (see the green line on the bottom) and this “green line” expend on tablet and mobile.

Thank you
thesacredpath · Member · Apr 10, 2014 at 2:48 pm
Copy link
Hi, to get rid of the border line and shadow around the content, add the following CSS.
```
.entry-content, .entry-summary {
    border: none;
}
.hentry {
    box-shadow: none;
}
```
thesacredpath · Member · Apr 10, 2014 at 2:54 pm
Copy link
To keep your header from distorting, change “height” in .site-header img in your custom CSS to “max-height” like below.
```
.site-header img {
    max-height: 129px;
    margin-bottom: 0;
}
```
Do the same for the height in .site-header as below.
```
.site-header {
    background: url("http://ovnigraphic.files.wordpress.com/2014/04/footer4.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    max-height: 129px;
}
```

No items found.