Dara theme: Body text cutting into featured image
-
http://bespokeimpressions.com/letterpress-wedding-invitations-uk/
Hi there,
Can anyone tell me what CSS I need to adjust, to stop my body of text from cutting into each featured image on my pages in the DARA theme?
I’m happy with the look of the thumbnail link photo and layout on the front page widgets, (www.bespokeimpressions.com), so don’t want to squish them up with the adjustment, just the actual featured image page.
Other than that, it’s an awesome theme :)
Thanks very much,
Richie
The blog I need help with is: (visible only to logged in users)
-
Hi bespokeimpressions
Can anyone tell me what CSS I need to adjust, to stop my body of text from cutting into each featured image on my pages in the DARA theme?
– To achieve the thing you want, you have to add the following code. In this code I have to remove the margin-top from -4.7em to 0em, for other spaces like padding and margin-bottom you can adjust as per your need
@media screen and (min-width: 1000px) style.css?ver=4.9.2:2537 .content-wrapper.full-width.with-featured-image { margin: 0 13% 0; padding: 1.6em 3% 0; }hope this helps , feel free to ask any questions if you have.
-
Thanks for your help and fast response – really appreciated
I changed the margin in style.css to 0 like this:
/* Full-Width Page Template */
.content-wrapper.full-width.with-featured-image {
margin: 0 13% 0;
padding: 1.6em 3% 0;
}
.content-wrapper.full-width.without-featured-image {
margin: 0 13%;
}.comments-closed .hentry:after {
display: none;
}But still can not see any changes in the full width page with featured image layout.
I also tried adding margin-bottom:
/* Full-Width Page Template */
.content-wrapper.full-width.with-featured-image {
margin: 0 13% 0;
margin-bottom: 3em 13% 0;
padding: 1.6em 3% 0;
}
.content-wrapper.full-width.without-featured-image {
margin: 0 13%;
}but again with no success….
Can you see what I’m doing wrong?
-
Hi bespokeimpressions
Please add the below code in your style.css sheet
@media screen and (min-width: 1000px) .content-wrapper.full-width.with-featured-image { margin: 0 13% 0; padding: 1.6em 3% 0; }and if this doesn’t work please let me know.
-
It comes up with an error on the { & } when I add it into the style sheet,
But if I add it and save it, it still does not change the layout
-
Hi bespokeimpressions
Can you try once adding this code in your style.css
@media screen and (min-width: 1000px) .post-thumbnail+.entry-header { margin: 86px 0 0 175px; }@media screen and (min-width: 1000px) .entry-body { margin-top: 7.6em; padding: 0 0 0 211px; } -
Thank you,
I added
@media screen and (min-width: 1000px) .post-thumbnail+.entry-header { margin: 86px 0 0 175px; } @media screen and (min-width: 1000px) .entry-body { margin-top: 7.6em; padding: 0 0 0 211px; }to the style css and I can’t see any difference yet
-
@bespokeimpressions, and @shubhamgmath, there has to be an additional set of curly brackets in Media Queries. One after the (min-width:1000px) part and one at the very end like this.
@media screen and (min-width: 1000px) { .post-thumbnail+.entry-header { margin: 86px 0 0 175px; } }And this.
@media screen and (min-width: 1000px) { .entry-body { margin-top: 7.6em; padding: 0 0 0 211px; } } -
-
Just to check, I’m adding it in the correct place, here is where I’m doing it….
/* Full-Width Page Template */ .content-wrapper.full-width.with-featured-image { margin: 0 13% 0; padding: 1.6em 3% 0; } @media screen and (min-width: 1000px) { .post-thumbnail+.entry-header { margin: 86px 0 0 175px; } } @media screen and (min-width: 1000px) { .entry-body { margin-top: 7.6em; padding: 0 0 0 211px; } } .content-wrapper.full-width.without-featured-image { margin: 0 13%; -
Really very sorry it was my mistake I missed out the extra bracket.
@thesacredpath Thanks for correcting me.
-
No worries at all! I appreciate the help.
Unfortunately, everything still looks the same, even with the extra brackets :(
-
HI
First you need to check if the custom CSS is in the right place
for the CSS code i tried with this one and it worked for me i Hope it works for you :
@media screen and (min-width: 1000px){ .content-wrapper.full-width.with-featured-image { margin: 0 4% 0; padding: 1.6em 3% 0; } }If it doesn’t work, you can run a test if you CSS is working by Changing the body background color by adding this line to your CSS:
body { background: green; }if the background color changed then try this code:
.content-wrapper.full-width.with-featured-image { margin: 0 4% 0; padding: 1.6em 3% 0; }I Hope this one helps
Regards,
Skobraf -
Hi Skobraf,
Should I be deleting any other CSS code?
And where is the best place to insert your code in the style css sheet?
Thank you
-
OK – GOT IT!!
I pasted the code you guys gave me in the additional css section within the DARA theme page options….. not in the actual style css page
Thanks so much for your help guys – I really appreciate it
-
-
Glad you’re all sorted.
A heads-up that these forums are for sites hosted on WordPress.com, but you’re running the WordPress software on your own hosting. If you need further help with the self-hosted version of Dara, feel free to post in its forum at WordPress.org:
https://wordpress.org/support/theme/dara
You’ll need a free WordPress.org account to post – if you don’t already have one, you can register here:
https://wordpress.org/support/register.php
Be sure to provide a link to your site when you post so people can help you more easily.
- The topic ‘Dara theme: Body text cutting into featured image’ is closed to new replies.
WordPress.com Forums 