Hi, Colin. Sorry, but this css does not work. It makes the whole site, including the homepage, only 960 px wide. I also tried using the second half of the css, and it shifted the entire post to the right, including the feature image, while leaving the header at full width. For this to look correct, the feature image needs to stay the same, and only the text body needs to have margins so that it appears at 80%. Thanks for your help!

Yes, I would still like to try the css. Here is the link to the post: http://athousanddifferentcolors.com/art-music-saved-me/ Thanks so much for your help!

Thanks for this video, Calin, but I would rather do this through the Custom CSS panel. Would you please double-check that css code that you provided, or provide a new css that would work? Thanks so much.

Thank you for providing the css…but it doesn’t work. I copied and pasted it in the Theme Panel>Custom Code>Advance CSS>Desktop, as you directed. Nothing happens. The rest of the site remains the same. Would you please double-check the code, or provide another css that might work? Thanks

I believe this link describes how to change the margin for a page? I need it to change the margin for the posts, and only on desktops. I believe this custom code would be entered under Custom Code > Advanced > Desktops. Would you please provide the custom code to do this? Thanks.

Yes, I know how to do that…but this is what I am asking for: When the post content is without sidebars, it fills the entire screen. Instead, I want it to be 2/3rds of the screen, only on desktops. In other words, I want more of a margin on the left and right, only on desktop screens. Please reference the link that I provided. Would you please provide the custom code to do this? Thanks.

Ok, thanks for the help!

I figured it out. Thanks for your help!

How can I access those files that are shown in the screencast?

Thanks so much! That worked.

The element on this webpage is Block 13. Thanks!

Hello,

I did as you suggested. I even made a new post (http://athousanddifferentcolors.com/new-post/) and made sure that the modal is off (http://athousanddifferentcolors.com/wp-content/uploads/2017/09/Untitled.png) and there is still this problem. Help?

Thanks,
Audrey

Sorry…the website now has a domain name: http://athousanddifferentcolors.com/. Password: ATDC

Thanks for your help!

I did the changes that you suggested. I cleared all caches and waited a week to make sure, because sometimes it takes a while for the changes to appear on my phone. Unfortunately, the problem is still happening.

On phone screens, the featured image jumps. When it loads, it is too small and there is a grey space at the bottom. But as soon as you scroll the page, the featured image zooms to the correct place. You can see that on a phone here: http://e50.4da.myftpupload.com/. I have tried using many different background images…high resolution, lower resolution, and different dimensions.

Do you have another fix?

Hi! Yes, my pop-up login looks exactly like the one in the screenshot you sent. However, I do not see a place for someone to Join…only to login if they already have an account. How can they “Join”? If they don’t already have an account, how can they create an account? Thanks.

Thanks!

Hi! I would like for the author name to be in Normal text, not all capital letters. Also, the bottom link, which says “Read more” here (http://e50.4da.myftpupload.com/community/) has a bright blue hover color. I want it to be my chosen blue color #406e87. How can this be adjusted? Thanks for your help!

In Safari, this problem seems to be resolved, with the top menu centered on all of the pages, but in Chrome, some of the pages have the top menu centered, while others have it left-aligned.

I just was able to copy code from another button that works. Apparently, the link code was wrong, although I don’t understand why the link needs to be so convoluted. At any rate, the code that works is here:

<div style=”border: 1px solid Lightgray; padding: 20px;”>
<h6></h6>
<h6 style=”text-align: center;”><span style=”font-size: 16pt; font-family: avenir-light;”>A Thousand Different Colors</span>
<span style=”font-family: avenir-light;”> is the creative community for everyone.</span></h6>
<p style=”text-align: center;”><span style=”font-family: avenir-light;”>This is the place to show your creative work, get connected, and discover ways to make a lasting difference in the world.
</span></p>
[vc_btn title="Learn more" style="custom" custom_background="rgba(64,110,135,0.9)" custom_text="#ffffff" shape="square" size="xs" align="center" i_icon_fontawesome="fa fa-lightbulb-o" add_icon="true" link="url:http%3A%2F%2Fe50.4da.myftpupload.com%2Fabout%2F||target:%20_blank|"]

</div>

The link to the site, once again, is: http://e50.4da.myftpupload.com/

Hello! The code is working, and I added “text-align: center” but strangely this is only working for the homepage menu. On all of the other pages, it is left aligned. Could you please tell me why?

This is the code I inserted to the Custom CSS>Advanced>Phones field:

@media (max-width: 767px){
.td-header-top-menu {
display: block;
text-align: center
}
}

@media (max-width: 767px){
.td-header-top-menu-full {
display: block!important;
text-align: center!important;
}
}

@media (max-width: 767px){
.td-header-sp-top-menu {
display: block !important;
text-align: center !important;
}
}

@media (max-width: 767px){
.td-header-top-menu-full {
display: block!important;
text-align: center!important;
}
}

Again, the code is here…

<div style=”border: 1px solid Lightgray; padding: 20px;”>
<h6></h6>
<h6 style=”text-align: center;”><span style=”font-size: 16pt; font-family: avenir-light;”>A Thousand Different Colors</span>
<span style=”font-family: avenir-light;”> is the creative community for everyone.</span></h6>
<p style=”text-align: center;”><span style=”font-family: avenir-light;”>This is the place to show your creative work, get connected, and discover ways to make a lasting difference in the world.
</span></p>
[vc_btn title="Learn more" style="custom" custom_background="rgba(64,110,135,0.9)" custom_text="#ffffff" shape="square" size="xs" align="center" i_icon_fontawesome="fa fa-lightbulb-o" add_icon="true" btn_link="http://audreywoodhams.com/"]

</div>

My apologies…it worked! Now for another question…can we center this Top Header Menu on the phones screen?

I also tried adding the code to the Advanced CSS>Responsive CSS under phones and iPad Portrait, but also nothing changed.

Thanks, but when I put in this code, nothing changes. To be clear, the Header Menu (main) is the menu that already is showing. I want the Top Header Menu to show as well, so that they both are showing on mobile devices. Thanks for your help!