Search Results for 'adjust page width'

[Bruce1122]

If you're facing an issue with nested columns and container blocks in web design, here's a possible solution. You want to have a full-width background color for the container block while maintaining consistent margins for the nested column block, similar to other content on the page that is not within a full-width container.

To achieve this, you can follow these steps:

Apply the full-width background color to the outer container block. This will ensure that the background color spans the entire width of the browser.

For the nested column block (column B), instead of using margins, utilize padding to create the desired spacing and align it with other normal or wide-width content on the page.

Set the desired padding values (e.g., left and right padding) for the nested column block. This will create space between the content and the sides of the browser window.

Adjust the width of the nested column block accordingly, making sure it occupies the desired width within the container block, taking into account the padding you've set.

If necessary, use CSS media queries to adjust the padding and width values for different screen sizes, such as smaller screens or mobile devices.

By using padding instead of margins, you can control the spacing within the nested column block without affecting the full-width background color of the outer container. This allows you to align the margins of the nested column block with other content on the page that is not within a full-width container.

Remember to apply the appropriate CSS styles and make adjustments based on your specific layout requirements and design considerations.

I hope this clarifies the solution for you.
https://www.globalsources.com/manufacturers/baby-diaper.html?utm_source=3009304

[brycejune]

Hi,
Hope so you're doing good, work on below points and will definitely work for you:
Create a child theme: It's important to create a child theme before making any modifications to the theme files. This way, your changes won't be overwritten when the theme is updated.

Locate the front page template file: In your child theme, find the front page template file. It is usually named something like front-page.php or home.php.

Edit the template file: Open the front page template file in a code editor and look for the main content section. It might be enclosed within a <div> or a <section> tag.

Remove any container or wrapper div: If there is a container or wrapper <div> around the main content section, remove it. This will allow the content to extend from the left to the right side of the screen.

Adjust CSS styles: If necessary, you may need to adjust the CSS styles to ensure the full-width effect is applied correctly. Look for any CSS classes or IDs related to the main content section and modify their width properties to 100%.

Save and upload changes: Save the modified template file and upload it to your child theme directory, replacing the existing file if needed.

Clear caching: If you have any caching plugins or services active, clear the cache to see the changes reflected on the front end.

Hope so this will help you!

Regards,
Bryce June

[davislee21222]

Hi Florence,

Yes, you can apply Masonry layout directly in your functions without using a plugin. You can use the Masonry library that is included with WordPress.

Here are the steps to apply Masonry layout to your posts loop and archives:

Enqueue the Masonry library in your functions.php file. You can add the following code:
php
Copy code
function enqueue_masonry() {
wp_enqueue_script( 'masonry' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_masonry' );
In your archive.php or index.php file (depending on which one you use for your home page), add a class of "masonry" to your container element. For example:
html
Copy code
<div class="masonry">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Your post loop code here -->
<?php endwhile; endif; ?>
</div>
Finally, you need to initialize the Masonry layout in your JavaScript file. You can add the following code:
javascript
Copy code
jQuery(document).ready(function($) {
$('.masonry').masonry({
itemSelector: '.post',
columnWidth: '.post',
percentPosition: true
});
});
Make sure to adjust the "itemSelector" and "columnWidth" selectors to match your HTML structure.

You can use the same code for your category archives by adding the "masonry" class to your category archive template file.

I hope this helps you to implement the Masonry layout without using a slow plugin. Let me know if you have any questions or concerns.

[Doug]

I have 4 images in an advanced column row with an image in each of 4 columns. The images are roughly the same size, but not identical, and I thought the advanced column would adjust to give them equal heights, thus aligning at the top and bottom, but having different widths.

That's happening with 3 of them, but 1 of them won't align with the other 3 along the bottom when viewed in desktop and in thumbnail mode.

When I tried to edit and drag the bottom of the image, it distorted the image vertically wildly, per the screen grabs linked here:

Page view
Page edit view

I haven't been able to successfully drag the image to resize it with the other images, and after looking at the block and using Inspect, I'm not able to tell what's going on.

Any direction on how to troubleshoot this issue would be greatly appreciated.

Info on the 4 images:

Problem image:
File name: pulseUX-chart-timelines-03.png
File type: image/png
File size: 307 KB
Dimensions: 2156 by 1569 pixels

Other images:
File name: pulseUX-activitybydaypart-02.png
File type: image/png
File size: 422 KB
Dimensions: 798 by 459 pixels

File name: pulseUX-chart-topauthors.png
File type: image/png
File size: 512 KB
Dimensions: 2258 by 1330 pixels

File name: pulseUX-chart-posttopics.png
File type: image/png
File size: 2 MB
Dimensions: 2198 by 1310 pixels

[VHughes]

I would like to add css to create transparency in the front page background images, (which I have as solid colors), allowing the main background image, (photo), to be seen as you scroll.
I have tried making a transparent graphic but that didn't work.
I also tried using the Genesis Super Customizer widget but there are no transparency/opacity options for those images, only for the footer.

I found the following code at https://brutalbusiness.com/add-front-page-image-overlays-to-genesis-infinity-pro/
for adding an overlay, (which works), but I do not know how to modify it for transparency, or if it could be.

Thank you for any help you can offer.

/* CSS: Add Front Page Image Overlays */

.front-page-1 {
position: relative;
z-index: 9;
}

.front-page-1:before,
.front-page-3:before,
.front-page-5:before,
.front-page-7:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .3); /* adjust the opacity (.3) as desired */
z-index: 0;
}

[lovebugs]

I am trying to make it so that all of the green sections on this page: http://kkcommunitypartnership.com/about-us/
are equal width and indentation. Because of the lists, it automatically makes it narrower than the paragraph blocks. Is there a way to change this so that everything is the same size?

[cricketyorkshire]

Hi, I'm using Genesis 3.3.3 and News Pro 3.2.2.

I have installed WPMU Dev Pro plugins (Forminator Pro, Hustle Pro etc) and since doing that, there is extra spacing under all my posts and pages that wasn't there before.

The advice was CSS code causing that spacing is here:
.site-container-wrap {
border: 1px solid #e3e3e3;
margin: 60px auto;
max-width: 1140px;
}

To fix this, it was suggested I add this to additional css in theme settings:
.site-container-wrap {
margin-bottom: 0 !important;
}

This didn't work and I was asked to contact Studiopress to adjust the CSS on the theme style.

Would appreciate any suggestions and steps of where to add any code. I wouldn't know where to start and it's a problem I need to fix urgently.

Thanks and all the best to everyone on the Forum for 2021!

[andytc]

In the childthemes functions.php , find line 123 - and comment it out (by adding 2 forward slashes) to show the header right widget area - as below

// Remove header right widget area.
//unregister_sidebar( 'header-right' );

Now got to widgets and find your new Header Right Widget area - Add a custom HTML widget and add your button code , leave the widget title blank (unless you want something there) -

For example -

<a class="button" href="#front-page-2">Start Your Journey</a>

There are no existing styles for the header right widget area in the childtheme , so we must add them. Adjust to suit your needs -

NOTE - We should change the nav-primary menu width from 60% > 100% - if you don't change this , it'll all be bunched up and look terrible. You can adjust that to suit , but try the 100% first.

Add the styles below into the additional CSS box in the customiser section and adjust to suit your needs -

.nav-primary {
  width: 100%;
}

.widget-area.header-widget-area {
  float:right;
  padding: 20px;
}

@media only screen and (max-width: 800px) {

  .widget-area.header-widget-area {
   float: none;
   text-align: center;
  }

}

Don't forget to clear your browser cache if you don't see the css changes

[bradm413]

I'm trying to adjust the positioning of the "img" element on the post excerpts show on this page, for example:

https://newmansmed.com/community/page/8/

I would like to position the images so that the top of the image is shown instead of the center of the image.

I have tried this in my Chrome Dev Tools, but it didn't seem to have any effect:

Original CSS:

img {
    height: auto;
    max-width: 100%;
}

Here's what I tried:

img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

I've tried with and without each of those settings, and I've tried object-position: top but with no change.

Am I targeting the wrong element?

Any pointing in the right direction would be GREATLY appreciated 🙂

Brad

[andytc]

It can be done , but it will affect many things , especially when you get down to mobile sizes , sure , you can make media quries , but it might be quite a few entries. Remember also the size of your main menu on the right, that might change over time and get longer and get hidden behind the logo. Also, the header is 'sticky' on scroll , so consider how it would look on interior pages with content. Lots to consider and many possible changes to make.

You can try this CSS to get started and see if it's going to work for you. Adjust as neccesary.

.site-header .custom-logo-link .custom-logo {
  max-height: 160px;
  width: auto;
  position: absolute;
  left: 50%;
  margin-left: -120px;
  top: 70%;
}

I've included this media query to switch it back on mobile , but check tablets on this

@media only screen and (max-width: 1023px) {

  .site-header .custom-logo-link .custom-logo {
    display: block;
    max-height: 80px;
    position: relative;
    margin:0;
    left: 0;
    top: 0;
  }

}

It's just something to give you something to look at , lots to be done and checked , especially mobile views , tablets etc.

[RichardHK]

Hi guys,

Using Gutenberg editor and Layout control in the Genesis pane is not available. All I have is a spinning wheel of death (as I think it is known!).

Q1: Possibly a plugin conflict but is this is a known issue with fix?

Q2: Where in the MySql database can I find a record to adjust Layout manually?
Want to set page to Full Width and cannot see anything in wp_posts or wp_postmeta that refers to Layout.

Thanks for your help.

[vquestmedia]

I am a newbie so please forgive my ignorance but my pages are displaying with very wide margins and I don't know how to adjust them.

Here is an example -

https://vqueststaging.wpengine.com/?page_id=40570

I want the shaded part to be full width or at least stretched.

[thinkmedia]

I just ran into this exact problem with Essence Pro.
I have three widgets on the home page and they don't resize on mobile so I had to add custom css to do it.

@media only screen and (max-width: 860px) {

.flexible-widgets.widget-thirds .widget {
margin-bottom: 20px;
padding: 20px;
}

}

You can adjust the max-width for where you want the point of adjustment to occur.

Pretty annoying for the theme not to do it as it is intended.

Hope that helps.

[jakobking]

Hi all,
Just wanted to share my own project that uses Genesis News Pro, with a little customization.

Shortly the modifications made:
-Link and site title colors changed to purple
-The side bar is now narrower and the main part wider. This is better for iPad and other mobile devices
-The whole site width in mobile is now wider, previously it was very narrow in modern mobile devices and thus hard to read
-The speed of the site is now great! A lot of adjustments done and Google pagespeed insights gives 98 and 100/100. Genesis works! The host is Kinsta at the moment.
-CTA buttons, tables and comparison tables customized with css

Go check out 🙂 thanks for reading!
Bitcoin Casino Kings

[Marijn]

Alright, sorry.

I want the image inside this widget (liposoma-technology-1):

<div class="liposoma-technology-1 widget-area" id="liposoma-technology-1">
<div class="wrap">
<section id="custom_html-12" class="widget_text widget widget_custom_html">
<div class="widget_text widget-wrap">
<div class="textwidget custom-html-widget">
<div class="liposomen-image"><img src="/new/wp-content/uploads/2019/04/liposomen.png" alt="Liposomes" scale="0">
</div>

to overlap front-page-1, there are no widgets at the bottom so it seems to me that .front-page-1.hero-section needs to be adjusted but I can't get it to work:

<div class="front-page-1 hero-section" role="banner">
<div id="wp-custom-header" class="wp-custom-header">
<img src="/uploads/2019/04/cropped-technology-bg.jpg" width="1500" height="784" alt="Technology</div>
<div class="wrap">
<section id="custom_html-3" class="widget_text widget widget_custom_html">
<div class="widget_text widget-wrap">
<div class="textwidget custom-html-widget">
<h2>text</h2>
<h4>text</h4>
<a href="#second"><i class="fas fa-angle-down"></i></a></div></div></section>
<section id="custom_html-7" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div class="usp" id="second">
<div class="container">
<div class="left first">
<img src="/uploads/2019/04/liposomal-formulas.png" alt="experience" class="icons-usp">
</div>
<div class="right">
<p>text</p>
</div>
<div class="more"><a href="#front-page-5"><i class="fas fa-chevron-down"></i></a></div>
</div>

<div class="container">
<div class="left first">
<img src="/uploads/2019/04/network.png" alt="Knowledge" class="icons-usp">
</div>
<div class="right"><p>text</p></div>
<div class="more"><i class="fas fa-plus"></i></div>
</div>

<div class="container">
<div class="left first">
<img src="/uploads/2019/04/customers.png" alt="Customers" class="icons-usp">
</div>
<div class="right">
<p>text</p>
</div>
<div class="more"><a href="#front-page-6"><i class="fas fa-chevron-down"></i></a></div>
</div>

<div class="container">
<div class="left first">
<p>text</p>
</div>
<div class="right">
<p>text</p></div>
<div class="more"><i class="fas fa-plus"></i></div>
</div>
</div></div></div></section>
</div></div>

[Victor Font]

I'm assuming you can't see the menu in the before header area? The site header has a fixed position. The menu is behind the header. First, you have to move the header down by adding some margin-top:

.site-header {
    position: fixed;
    width: 100%;
    z-index: 9999;
    margin-top: 69px;
}

Next, you have to make the menu position fixed also. With position fixed, the float: right won't work any longer. You have to adjust the width to 100% and use text-align to move the menu back to the right. You also have to add color to the background or else you will see everything on the page scroll through the menu.

.nav-primary {
    clear: none;
    width: 100%;
    position: fixed;
    background-color: #fff;
    text-align: right;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[iondoaga]

Hello,

Please check these pages and see the background grey colored sections.

https://goseomedia.com/continutul-pe-website/
https://goseomedia.com/revizuirea-datelor-analitice/

The Breakthrough Pro theme has a nice purple color background and the white color content background is on top.

I use a plugin to add grey colored background sections. These background sections have the option to stretch the background element full width and the second option to adjust the margins of the element. But I can't find layout settings that look good on desktop, tablet, and mobile.

I want these background sections to fit within the white background and look/behave like the featured images. Is there a way to do that?

[carter.scott]

Thanks Victor, big help! I adjusted the widths per your recommendation and now my posts look great. One problem though: it's messed up my home page! Magazine pro comes with pre-set widgets for presenting your posts on the front page and they force your thumbnails into pre-set image blocks, essentially meaning that the homepage will look screwy if you decrease the content width below where it was before. But I was able to resolve this by manually changing the width on .home-middle .featured-content to fit in with the changes.

Thanks again!

[Victor Font]

There are quite a few components to this.

Neither your header or after header menu are fixed positions, which means they scroll with the page right now. To make any HTML element stay in place and have the content move under it, its highest level element has to have position: fixed; and the width changed to 100% in CSS. You may also have to adjust the element's z-index so it remains the topmost layer.

The moment you apply that code to your menu, it will stay exactly where it is on the screen or jump back down to its original relative position. As you scroll your content, you'll have a large gap above the menu where the header was position. You're essentially splitting your page content above and below the menu. This means you also have to use -172px as the negative top margin instead of the -106px you have now.

The scrolling aspect after a fixed number of pixels is handled through jQuery. With jQuery you monitor the window scroll, and when it moves the number of pixels you want, you apply the new class to the element.

This code is available in other Studio Press themes if you have access. You can just copy the code from one theme, adjust it for your purposes, and use it in yours.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

Normally, you can't make a child section larger than its parent. A typical page wraps all of its content in a site-container object. The site container or its wrap is set to your 1280px.

Child objects, those objects placed within the site container are limited by the parent's width.

You can either set the entire page to 100% width and make select child areas smaller by adjusting margins or padding. Or, you can use negative margins to force a child object to be wider than its parent.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?