[Theme: Bouquet] Clearfix Header and Content

  • Resolved Salem-Keizer Public Schools

    (@sksdrisk)


    10 years, 11 months 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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • paulwpxp

    (@paulwp)

    10 years, 11 months 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.

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months 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

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months 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.

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months 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.

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months 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.

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months 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.

    paulwpxp

    (@paulwp)

    10 years, 11 months 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.

    Thread Starter Salem-Keizer Public Schools

    (@sksdrisk)

    10 years, 11 months ago

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Theme: Bouquet] Clearfix Header and Content’ is closed to new replies.

Tags