I created my website using Bootstrap and then converted it to WordPress: My website. I'm not new to Bootstrap, but am new to WordPress.
I'm having a problem that I just can't solve: When I look at the blog page or any of the posts pages in mobile view, there's a huge padding at the top of the post header.
I've tried modifying my CSS file to reduce padding at the top of the heading:
.entry-header {
padding-top: 10px;
}
but it's just not working.
The problem is not with your padding but with your #sidebar div. The sidebars height is causing the mobile issue.
As you are hiding all of the content in your sidebar you might as well hide the whole sidebar on mobile using a media query.
Add this toward the bottom of your css:
#media only screen and (max-width: 767px) {
#sidebar {
display:none;
}
}
Related
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area.
When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;.
The content-pages will be created using the Gutenberg Builder and I want to be able to add background-attributes to the blocks I use and display them full-width, but the content to fall into the max-width which was defined before.
HTML:
<header class="site-header">
<div class="header-wrapper"></div>
</header>
<main class="site-content">
<article class="post-10">
<header></header>
<div></div>
<footer></footer
</article>
</main>
<footer class="site-footer">
<div class="header-wrapper"></div>
</footer
CSS:
.header-wrapper,
.footer-wrapper,
article {
max-width: 1366px;
margin: 0 auto;
}
I get this:
I want my background to be full-width, but my content to have the same with as the content of my header and footer.
Is there a possibility to set the same max-width for the header-, content- and footer-section of the page, and make sure the background in the content-area is still full-width?
You can activate "wide alignment" and "full alignment" by adding add_theme_support( 'align-wide' );
to your functions.php file. The user then has the option to align images across the whole viewport width.
See also https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#opt-in-features
But that's for images, not for backgrounds.
For background areas/images you could try to create regular blocks (100% of the content area) which have margin settings like margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); (same as in full-width Gutenberg blocks) and padding-left/padding-right calc(50vw - 50%);: That way the block would span the whole viewport width, but the content area would have the width of the content area (full width minus padding). You also would have to add the regular padding you want to use inside your content column to those values.
If I understand then your css should look like this:
.header-wrapper,
.footer-wrapper,
article header, article div, article footer {
max-width: 1366px;
margin: 0 auto;
}
article{
width: 100%;
background: blue;
}
but only if max-width is setted for those 3 divs inside article
Does content-block is represented by article ?
Update
I recreated codepen from https://css-tricks.com/full-width-containers-limited-width-parents/
https://codepen.io/anon/pen/eaJyqV
If this is possible you could put image with position: absolute and then put text with position: absolute on top of it but I guess your content-block doesnt work that way ;/
I am having a issue with the navbar on the child theme using the Mystile theme. When on a mobile phone the nav bar turns into a square box that you click on to acess the navbar, for some reason it appears ontop of the logo, I just can't figure out or get any CSS to make it go to its own line. I am hoping someone can help here.
Website: http://test.cyberglide.co.uk
Install Custom CSS plugin (asking you to install plugin because it overrides all other CSS) and insert this CSS. You can use other methods to override all other conflicting CSS sheets.
Be sure to include media queries for Mobile views.
#media only screen and (max-width:43.75em) {
#header #logo {
float: none;
display: block;
}
#header .nav-toggle {
position: relative !important;
display: inline;
}
}
I would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
I am using a responsive Slideshow module - Lof ArticlesSlideShow (DEMO) .
How can I hide the "Navigator" part (the scrolling rows of articles with thumbnails) when I resize the window to a smaller size.
Right now, if I re-size the browser window to my mobile's display's size (Motorola Defy+), the navigator part will come over the image,title and introtext . Opened the demo link on the mobile browser and same effect.
Since the link to the article is on the title, which becomes hidden under the navigator, the article page cannot be accessed.
Any idea?
Try adding this to a custom CSS file or current one:
#media screen and (max-width: 480px) {
.lof-buttons-control {
display: none;
}
}
This means that the maximum width of the screen, till this code starts to kick in is 480px. From then on, it hides the Navigator part.
Hope this helps
#Lodder - AMAZING!!!!!!!! :D
I replaced .lof-buttons-control with .lof-ass .lof-navigator and it worked :D
#media screen and (max-width: 480px) {
.lof-ass .lof-navigator {
display: none;
}
}
It means a lot!!!!
I have a widget that is comprised of quite a few divs. I then use javascript to bring the widget to life and do what it is supposed to do.
It is positioned on the page above the main content.
The client feels having all the widget html above the keyword rich content is bad for rankings, yet visually this is how we want the page set up.
What are some options here to keep the widget positioned as we want, yet not clutter up the top of the page as it is crawled?
current setup:
-javascript file is called in head
-widget html, which is several divs, text, images, etc.
-other page content divs
You could include the widget at the bottom of the page, then use css to position it at the top. Make sure your main content has a top-margin equivalent to the size of the widget. As mentioned in your comment, you'd also need to position the widget sufficiently far down the page to avoid the header content. This relies on your header and widget having specified heights. Your html would be something like this:
<body>
<div class="header">The header</div>
<div class="main-content">The main content</div>
<div class="widget">widget</div>
</body>
Then your css could be something like this:
.header, .main-content, .widget {
height: 40px;
}
.header {
background-color: red;
}
.main-content {
background-color: blue;
margin-top: 40px; /* height of widget */
}
.widget {
background-color: yellow;
position: absolute;
top: 40px; /* height of header */
}
You can see this in action here: http://jsfiddle.net/W3RzU/
As bardiir pointed out, putting the widget code in the correct place would be much simpler and would have minimal (if any) impact on seo.