So, another week and another issue has presented itself.
I’ve created a custom sidebar for a career portal on our website. On every page and post it presents perfectly – except if I add post style 3 (same goes for full width, but we don’t use that style).
There seems to be some code interfering with the sidebar coding. How can I solve this?
This is how the sidebar is supposed to look:
http://i.imgur.com/GMAGqLP.jpg
This is how it looks with style 3/full width:
http://i.imgur.com/7PSCjnz.jpg
As you can see my margin coding doesn’t seem to apply, leaving more space within the coloured boxes. In addition the text in the bottom element breaks onto new lines in tw places.
This is the code I use (text block in widget section):
<div style=float:left;margin-top:-16px;background-color:#2d9dd8;padding-left:14px;padding-right:24px;">
<div style="color:#f1f1f1;">
<h2 style="color:#f1f1f1;">Ledige stillinger:</h2></div>
<b><p style="color:#f1f1f1;">Vi ser etter unge, sultne selgere som ønsker å bli en del av et av Norges ledende salgsteam!</p></b>
<div style="width:46%;float:left;align:center;margin-top:-16px;"><h4 style="color:#f1f1f1;"> Heltid: <br/><img src="http://www.vitamail.no/wp-content/uploads/2014/08/counter-003.png" alt="003" height="154" width="82" style="margin-top:4px;"> </h4></div>
<div style="width:46%;float:left;color:#f1f1f1;margin-top:-16px;;"><h4 style="color:#f1f1f1;"> Deltid: <br/><img src="http://www.vitamail.no/wp-content/uploads/2014/08/counter-004.png" alt="004" height="154" width="82" style="margin-top:4px;"> </h4></div>
<div style="width:46%;float:left;color:#f1f1f1;"><h4 style="color:#f1f1f1;"> Lederstillinger: <br/><img src="http://www.vitamail.no/wp-content/uploads/2014/08/counter-001.png" alt="001" height="154" width="82" style="margin-top:4px";> </h4></div>
<div style="width:46%;float:left;color:#f1f1f1;"><h4 style="color:#f1f1f1;"> Timelønn (snitt): <br/><img src="http://www.vitamail.no/wp-content/uploads/2014/08/counter-242.png" alt="242" height="154" width="82" style="margin-top:4px;"> </h4></div>
<div style="float:left;"><h4 style="color:#f1f1f1;margin-top:-12px;"><br/><a href="http://www.finn.no/finn/job/fulltime/result?sort=0&keyword=Vitamail"style="color:#f1f1f1;">SE ALLE LEDIGE STILLINGER HER!</a></h4></br></div>
</div>
<div style=float:left;margin-top:28px;background-color:#ee7514;color:#f1f1f1;padding-left:14px;padding-right:24px;">
[contact-form-7 id="752" title="Jobbsøker"]
</div>
<p> </p>
<h3>«Muligheter kommer ikke av seg selv. Du må skape dem.»</h3>
<div style="width:56%;float:right;margin-top:-28px;">
<img src="http://www.vitamail.no/wp-content/uploads/2014/08/jacob_liten.png" alt="Jacob Lindholm" height="240" width="360"></div>
<div style="width:40%;float:left;margin-top:-22px;">
<p> </p>
<img src="http://www.vitamail.no/wp-content/uploads/2014/08/jacobunderskrift.png" alt="JL signatur" height="200" width="132"></div>
<div style="width:40%;float:left;margin-top:-16px;">
<h5><b>Jacob Lindholm</b></h5>
<p>Rekrutteringsansvarlig<br />
Vitamail AS</p>
<p><b><a href="tel:46747411">+47 467 47 411</a>
<br />
<a href="mailto:jobb@vitamail.no?Subject=Jeg%20vil%20jobbe%20i%20Vitamail" target="_top"><font color="#2d9dd8">jobb@vitamail.no</font></a></b></p></div>
What causes this and how can I fix it?
Hi,
You can adjust this using custom css. Can you please send me an URL to your site so I can inspect this?
I have tested this and found no problem using post style 3 or post style 4
Thanks
Weird… So it could be some of mye custom CSS then?
This is the only custom CSS I’ve added relating to only style 3:
.single_template_3 .td-post-header-full .entry-title {
margin: 0px 21px 14px 21px;
font-family: 'Roboto Condensed', sans serif !important;
font-size: 50px;
line-height: 48px;
}This is the url to the post:
http://www.vitamail.no/karriere/mot-en-av-norges-best-betalte-21-aringer/
Hi,
The css should not affect the sidebar as it apply’s only to the post title. The sidebar’s width should not change though when you use post style 3, as I noted before, I have made some tests and found no issue.
Please set the post to use post style 3 and then let me know so I can inspect this.
Thanks
Here is a copy of the post using post style 3:
http://www.vitamail.no/ukategorisert/mot-en-av-norges-best-betalte-21-aringer-kopi/
Original:
http://www.vitamail.no/karriere/mot-en-av-norges-best-betalte-21-aringer/
Hi,
The problem comes from this custom css: http://screencast.com/t/DcaenrFMxhxk and the issue it’s with both posts styles not only 3 the difference it’s observable though only for the post style 3 because of the large width of the feature image.
You can check this yourself, just inspect each post then check the span’s 8 width and remove the /* width: 60.5% !important; */ line and you will notice how it will change and move to the right: http://screencast.com/t/xnwit4JCSGq
You can remove or overwrite this css to fix this or you can use this css:
.td-post-sidebar .textwidget p {
word-wrap: initial;
} …to not wrap the words from sidebar and leave it this way.
My advice is to remove the css for that width.
Thanks
Hi!
Removing /* width: 60.5% !important; */ did not seem to make any difference, however adding your line of code did… sort of. The text now displays in one row, however the margins are still slightly off, pushing the text slightly lower than what I would like.
See updated post:
http://www.vitamail.no/karriere/mot-en-av-norges-best-betalte-21-aringer-kopi/
And, again: How it should look:
http://www.vitamail.no/karriere/mot-en-av-norges-best-betalte-21-aringer/
Sorry to keep bothering you with this, and thanks for your help so far!
Hi,
I have tested this on your site: http://screencast.com/t/XGdcUyDXzLn
I believe the width: 60.5% !important; was set via custom css and removing it should fix this because of this fixed width the sidebar moves slightly to the left, you will have to remove that css, check the custom css you have added in theme panel and remove the one that sets the post content row-fluid to 60,5% width.
You can use this css also, but it would be better if you find that css and remove it because that css is dynamic and changes based on screen width and can’t be fixed.
@media (min-width: 1200px){
.td-grid-wrap .row-fluid .td-post-content {
width: 65.174129353234% !important;
}
}Thanks
