WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Bouquet] Clearfix Header and Content (9 posts)

  1. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    http://sksdrisk.com

    I am a Power User, not a programmer. I'm using the Bouquet theme, which is responsive. The responsive feature works well on desktops and laptops, but not on an iPad, even though the theme appears to be programmed to address this.

    I have the CKEditor Plugin installed. I like using tables. Sidebar menu is turned off. I'm using this as an image-rich website, not a blog.

    The responsive feature does not appear to be working on the header image, menu, and content box on iPads. It works just fine on desktops and laptops.

    In areas where there are tables, the content is responding perfectly.

    It seems to be a clearfix issue, however, there is already clearfix code in the theme.

    Thank you.

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    The responsive feature does not appear to be working on the header image, menu, and content box on iPads. It works just fine on desktops and laptops.

    Does the same occur to the official theme demo site ? or is it just your site ?

    In areas where there are tables, the content is responding perfectly.

    It's certainly not, in fact all the explicit widths set in px to <table>, <td> are what ruin the site's layout.

  3. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    The Bouquet demo site works perfectly on an iPad.

    You're right about fixed-width tables. I have one page without any tables and it the content background lays out just fine. However, the header did not adjust its size, even though it does take up all of the width of the screen. The url to which I'm referring is: http://sksdrisk.com/?page_id=1706

  4. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    I removed the fixed widths in the table on my main page. I have the same problems as before and worse because my graphics are all smooshed now.

    I'm putting the widths back since removing them did not help.

  5. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    I changed the width on the main page from px to percentages. It squished the layout, but did not fix the problem. It seems that the problem is definitely connected to tables in the content section.

    I have no idea why the header image keeps getting cut off.

  6. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    The problem is close to being solved. Here is what I have learned:

    1) Table widths must be in percentages, not pixels. (Thank you, paulwpxp).

    2) The problem is not solved if the "hover-over" plugin is used. There is a definite conflict between the theme and the hover-over.

    3) I have no idea why the header image is being cut off. It is the recommended pixel size.

  7. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    I removed EVERY fixed width on every image and everything on the home page. That has fixed the problem.

    HOWEVER, the header image issue is not resolved.

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    With your current markup, this has to change, or go away.

    #branding .header-link {
    	display: table-cell;
    	min-height: 180px;
    	position: absolute;
    	width: 80%;
    }

    The way you implement full sized logo, with background image and empty element inside, is not a friendly approach for RWD. You could keep this same markup but you will have to do a research on background-size cover or contain, but still, the image will get cut off somehow, depending on the background-position.

    The better approach is to put a real <img> tag in there, instead of using background.

  9. Salem-Keizer Public Schools
    Member
    Posted 1 year ago #

    Thank you very much! I'll work on it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags