Appetite Themed Blog – Urgent CSS Help needed!

tanishqkumar · Member · May 19, 2017 at 9:28 am
Copy link

Add topic to favorites
Hi,

All of these questions are in context of one of the pages on the website: careerfear.org

1. On the home page, the solid white menu bar at the top obscures part of the featured content slideshow. How do I move the slideshow down so that it isn’t hidden or obscured by the white menu bar at the top? I don’t want to make any changes to the menu bar, just want to move the slideshow down the site page so we can see all of it.

2. How can I move the vertical line of white circles on the right side of the slideshow to become a horizontal line centered at the bottom of the slideshow?

3. I inserted a videopress video using the media inserter on the visual editor of a page. I resized this video by specifying ‘w=900’, so the entire HTML code to do with the video now looks like: [wpvideo WINxvUBs W=900]

However, the video is not centered. I tried using the <p style=”padding-left:120px;”></p> to move it to the centre, but this disappears every time I update the page for some reason. How can I centre this Videopress video on my page? (it’s on private:’draft interview template’)

5. (Not really to do with CSS) When I look up key words to find my site online, the first few results always say careerfeardotorg.wordpress.com, when I’ve already changed my main domain to careerfear.org. How can I make only sites with this domain appear online?

Thank you if you’ve read this far down!

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · May 19, 2017 at 9:52 am
Copy link
Hello @tanishqkumar

1. On the home page, the solid white menu bar at the top obscures part of the featured content slideshow. How do I move the slideshow down so that it isn’t hidden or obscured by the white menu bar at the top? I don’t want to make any changes to the menu bar, just want to move the slideshow down the site page so we can see all of it.

To do this just add a top margin(equal to the height of the menubar) to the slideshow element using this CSS:
```
.hero {
    margin-top: 61px;
}
```
and then adjust the top margin on mobile devices too:
```
@media only screen and (max-width: 768px) {
    .hero {
        margin-top: 0;
    }

    /*menu-bar fix on mobile*/
    #masthead.header-loaded {
        background: transparent;
    }
}
```
2. How can I move the vertical line of white circles on the right side of the slideshow to become a horizontal line centered at the bottom of the slideshow?

Try this CSS for doing this:
i. Move the white circles items to the center:
```
#primary-header .bx-controls {
    display: flex;
    justify-content: center;
    top: inherit;
    bottom: -30px;
    right: 0;
    left: 0;
}
```
ii. Place the circles side by side horizontally:
```
.bx-default-pager {
    display: flex;
}
```
iii. Add some margins between the circles:
```
.bx-pager-item {
    margin: 0 5px;
}
```
3. I inserted a videopress video using the media inserter on the visual editor of a page. I resized this video by specifying ‘w=900’, so the entire HTML code to do with the video now looks like: [wpvideo WINxvUBs W=900]

However, the video is not centered. I tried using the <p style=”padding-left:120px;”></p> to move it to the centre, but this disappears every time I update the page for some reason. How can I centre this Videopress video on my page? (it’s on private:’draft interview template’)

Can you provide a link to the example page that contains the video? This might help us provide you the exact code to center the video(if it is possible).

5. (Not really to do with CSS) When I look up key words to find my site online, the first few results always say careerfeardotorg.wordpress.com, when I’ve already changed my main domain to careerfear.org. How can I make only sites with this domain appear online?

Make sure you have verified your domain with google. If you haven’t then follow this official support guide to do that: https://en.support.wordpress.com/verifying-your-domain-with-google/

And then, just keep creating quality contents frequently. Google will crawl and update your site on their search index. However, there is not specified time for this. Sometimes it happens really quickly and sometime it takes about 3-6 months too. So the best thing to do would be keep your site public under your privacy settings so that it can be indexed by Google and then keep posting/updating your site with quality contents.

Hope these help. 🙂
tanishqkumar · Member · May 19, 2017 at 10:40 am
Copy link
Thanks for the quick response.

The page on which the video isn’t being centered properly is: https://wordpress.com/page/careerfear.org/227

Also, could you clarify where I should add the code for the mobile devices (q1). In the same CSS editor where I paste all the other code?
otpidusprime · Member · May 19, 2017 at 11:01 am
Copy link
https://wordpress.com/page/careerfear.org/227

This link is not public, it is specific to you. We cannot view it. Please provide a link to the published page.

Also, could you clarify where I should add the code for the mobile devices (q1). In the same CSS editor where I paste all the other code?

1. Go to My Site(s) → Customize(Beside the Themes option) or just click here: https://wordpress.com/customize/. This will open the site Customizer.
2. On the sidebar of the Customizer, click the CSS tab.
3. Put the mobile code there.

More information about editing CSS can be found here: https://en.support.wordpress.com/custom-design/editing-css/
tanishqkumar · Member · May 19, 2017 at 11:06 am
Copy link
Here is the link to the page:

https://careerfear.org/draft-interview-template/

You’ll see the video on the left hand side of the page, whereas I need it to be centered.
otpidusprime · Member · May 19, 2017 at 11:10 am
Copy link
Okay do this:
1. On the post editor, switch to the HTML tab.
2. Find the iframe code for the video and then put it under a paragraph tag and use inline CSS ‘text-align: center’ to centerize the video.

Here’s what it should look like:
<p style="text-align:center;"><iframe width="900" height="506" src="https://videopress.com/embed/WINxvUBs?hd=0&autoPlay=0&permalink=0&loop=0" frameborder="0" allowfullscreen=""></iframe></p>

No items found.